gulp使用

入门指南

1. 全局安装 gulp：

$ npm install --global gulp

2. 作为项目的开发依赖（devDependencies）安装：

$ npm install --save-dev gulp

3. 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

4. 运行 gulp：

$ gulp

默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。

想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。

二. 插件的使用

1.less

var gulp = require( "gulp"),

less = require( "gulp-less");

gulp. task( "less", function(){

return gulp. src( "./less/*.less")//这个地址是less文件夹地址

. pipe( less())

. pipe( gulp. dest( "./css/")); //这个地址是目标文件夹地址

});

2.gulpautoprefixer添加css前缀

var gulp = require( "gulp"),

autoprefixer = require( "gulp-autoprefixer");

gulp. task( 'testAutoFx', function () {

gulp. src( 'src/css/index.css') //目标文件

. pipe( autoprefixer({

browsers: [ 'last 2 versions', 'Android >= 4.0'],

cascade: true, //是否美化属性值 默认：true 像这样：

//-webkit-transform: rotate(45deg);

// transform: rotate(45deg);

remove: true //是否去掉不必要的前缀 默认：true

}))

. pipe( gulp. dest( 'dist/css')); //输出目录

});

3.2、gulp-autoprefixer的browsers参数详解 （传送门）：https://github.com/ai/browserslist#queries

● last 2 versions: 主流浏览器的最新两个版本

● last 1 Chrome versions: 谷歌浏览器的最新版本

● last 2 Explorer versions: IE的最新两个版本

● last 3 Safari versions: 苹果浏览器最新三个版本

● Firefox >= 20: 火狐浏览器的版本大于或等于20

● iOS 7: IOS7版本

● Firefox ESR: 最新ESR版本的火狐

● > 5%: 全球统计有超过5%的使用率

3. gulp-cssmin //压缩css

var gulp = require( "gulp"),

cssmin = require( 'gulp-cssmin');//引入cssmin

rename = require( "gulp-rename");//引入rename为了重命名文件

gulp. task( 'mincss', function () {

gulp. src( 'less/*.css') //目标文件

. pipe( cssmin())

. pipe( rename({ suffix: '.min'})) //重命名加的后缀

. pipe( gulp. dest( './less')); //输出地址

});

4.gulp-imagemin //图片压缩

var gulp = require( "gulp"),

imagemin = require( 'gulp-imagemin');

gulp. task( 'imagemin', () =>

gulp. src( './img/*') //目标文件

. pipe( imagemin())

. pipe( gulp. dest( './images'))//输出地址

);

5.

gulp-uglify 压缩js

var gulp = require( "gulp"),

uglify = require( 'gulp-uglify'),

pump = require( 'pump');

gulp. task( 'compress', function ( cb) {

pump([

gulp. src( 'lib/*.js'), //目标文件

uglify(),

gulp. dest( 'dist') //输出目录

],

cb

);

});

6.gulp-useref

var gulp = require( 'gulp'),

useref = require( 'gulp-useref'),

gulpif = require( 'gulp-if'),

uglify = require( 'gulp-uglify'),

minifyCss = require( 'gulp-clean-css');

gulp. task( 'html', function () {

return gulp. src( 'app/*.html')

. pipe( useref())

. pipe( gulpif( '*.js', uglify()))

. pipe( gulpif( '*.css', minifyCss()))

. pipe( gulp. dest( 'dist'));

});

html中写

< html >

< head >

<!-- build:css css/combined.css -->

< link href= "css/one.css" rel= "stylesheet" >

< link href= "css/two.css" rel= "stylesheet" >

<!-- endbuild -->

</ head >

< body >

<!-- build:js scripts/combined.js -->

< script type= "text/javascript" src= "scripts/one.js" ></ script >

< script type= "text/javascript" src= "scripts/two.js" ></ script >

<!-- endbuild -->

</ body >

</ html >

这样就可以将css，js自动合并 并压缩

7.gulp-rev 添加版本号

gulp. task( 'default', () =>

gulp. src( './css/*.css')

. pipe( rev())

. pipe( gulp. dest( './'))

. pipe( rev. manifest()) //- 生成一个rev-manifest.json

. pipe( gulp. dest( './rev'))

);

8.gulp-concat 合并多个文件

9.gulp-htmlmin 压缩html

10.gulp-rev-collector

11.gulp-filter和gulp-rev-replace联合发布压缩并替换文件，还加了哈西马前缀

var gulp = require( 'gulp');

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

var revReplace = require( 'gulp-rev-replace');

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

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

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

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

gulp. task( "index", function() {

var jsFilter = filter( "**/*.js", { restore: true});

var cssFilter = filter( "**/*.css", { restore : true});

var indexHtmlFilter = filter([ "**/*", "!**/index.html"], { restore: true});

return gulp. src( "./index.html")

. pipe( useref()) // Concatenate with gulp-useref

. pipe( jsFilter)

. pipe( uglify()) // Minify any javascript sources

. pipe( jsFilter. restore)

. pipe( cssFilter)

. pipe( csso()) // Minify any CSS sources

. pipe( cssFilter. restore)

. pipe( indexHtmlFilter)

. pipe( rev())

. pipe( indexHtmlFilter. restore)

. pipe( revReplace())

. pipe( gulp. dest( 'public'));

});