The learngulp from lienmac

安装gulp

在gulp下安装postcss

结合网上教程加上自己平时工作需要，从而总结以下文章

环境安装

环境：nodejs

链接：http://nodejs.cn/ （中文）

编辑器：webstorm

文件目录结构

|----root
    |----app/
        |----dist/（样式脚本编译后存放的目录）
            |----css/
            |----js/
            |----images/
        |----src/（原编写的代码）
            |----css/
            |----js/
            |----images/
        |----rev/（自动生成用md5命名的文件的json）
        index.html
    |----node_modules/（自动生成）
    |----gulpfile.js（需要创建）
    |----package.json（需要创建）

准备工作

在根目录下新建package.json文件
编写代码：

    {
      "name": "test",
      "version": "0.0.1"
    }

webstorm可以创建，并附有以上代码，name为项目名，version为版本号

之后安装的gulp和gulp相关插件，都需要加上 --save-dev,
这样可以自动把依赖关系写在package.json文件里

Gulp安装

cmd命令进入项目根目录，然后敲击命令行如下：

npm install gulp --save-dev

根目录下已经生成 node_modules 文件夹，里面已经包含了刚才安装好的gulp，
在根目录下新建js文件名为gulpfile.js，打开该文件开始编写代码：

var gulp = require('gulp');

这样就可以把gulp引入进来了。

gulp插件

几个常用插件：

自动补全兼容性代码：gulp-autoprefixer

压缩css代码： gulp-minify-css

压缩js代码：gulp-uglify

合并文件：gulp-concat

在cmd下用npm命令进行安装，例如

npm install --save-dev gulp-autoprefixer

在gulpfile.js中引入

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    minifyCss = require('gulp-minify-css'),
    uglify = require('gulp-uglify'),
    concat = require('gulp-concat')

引入后，可以编写task，来执行所需要的操作。

  gulp.task('css', function () {
      gulp.src('./app/src/css/**/*.css')
          .pipe(autoprefixer())
          .pipe(minifyCSS())
          .pipe(concat('wap.min.css'))
          .pipe(gulp.dest('./app/dist/css'))
});

首先，用gulp.task()来定义一个名为css的task，后面跟上回调函数。
用gulp.src()来制定想要编译的文件。
用pipe()函数来执行插件。
最后，用gulp.dest()来指定输出路径。

安装postcss

npm install --save-dev gulp-postcss

在gulpfile.js增加引入

var postcss = require('gulp-postcss');

刚才以css命名的task再来改造一下：

  gulp.task('css', function () {
      var processors = [  //新增
      ];
      gulp.src('./app/src/css/**/*.css')
          .pipe(postcss(processors)) //新增
          .pipe(autoprefixer())
          .pipe(minifyCSS())
          .pipe(concat('wap.min.css'))
          .pipe(gulp.dest('./app/dist/css'))
});

processors 为数组，用来存放postcss的插件，
设置postcss()执行PostCSS，并且给postcss()传递processors参数

编写完css文件后，在cmd中输入 :

gulp css

就可以看到效果

postcss插件

cssnext (使用CSS未来的语法),
precss (像Sass的函数)

npm install cssnext precss --save-dev

在gulpfile.js中引入

var cssnext = require('cssnext');
var precss = require('precss');

然后将这两个插件添加到processors数组中，更新后的数组如下：

var processors = [
    autoprefixer,
    cssnext,
    precss
];

这样就可以像scss一样去操作css文件，

h5页面需要的插件

手淘团队开发的postcss-px2rem

引入代码：

var px2rem = require('postcss-px2rem');

在processors数组中添加：

var processors = [px2rem({remUnit: 75})];

lienmac / learngulp Goto Github PK

learngulp's People

Watchers

learngulp's Issues

安装gulp

在gulp下安装postcss

环境安装

文件目录结构

准备工作

Gulp安装

gulp插件

安装postcss

postcss插件

h5页面需要的插件

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent