这里是我学习gulp的时候, 在网上查阅资料中, 相对使用较多的比较常见的好用的一些插件, 在这里记录下来!
自动加载插件 使用 gulp-load-plugins
安装:npm install --save-dev gulp-load-plugins
要使用gulp的插件,首先得用require
来把插件加载进来,如果我们要使用的插件非常多,那我们的gulpfile.js
文件开头可能就会是这个样子的:
1 2 3 4 5 6 7 8 9 10 11 var gulp = require ('gulp' ), a = require ('gulp-a' ), b = require ('gulp-b' ), c = require ('gulp-c' ), d = require ('gulp-d' ), e = require ('gulp-e' ), f = require ('gulp-f' ), g = require ('gulp-g' ), z = require ('gulp-z' ); 1234567891011
虽然这没什么问题,但会使我们的gulpfile.js
文件变得很冗长,看上去不那么舒服。gulp-load-plugins
插件正是用来解决这个问题。gulp-load-plugins
这个插件能自动帮你加载package.json
文件里的gulp插件。例如假设你的package.json
文件里的依赖是这样的:
1 2 3 4 5 6 7 8 { "devDependencies" : { "gulp" : "~3.6.0" , "gulp-rename" : "~1.2.0" , "gulp-ruby-sass" : "~0.4.3" , "gulp-load-plugins" : "~0.5.1" } }
然后我们可以在gulpfile.js
中使用gulp-load-plugins
来帮我们加载插件:
1 2 3 var gulp = require ('gulp' );var plugins = require ('gulp-load-plugins' )();
然后我们要使用gulp-rename
和gulp-ruby-sass
这两个插件的时候,就可以使用plugins.rename
和plugins.rubySass
来代替了,也就是原始插件名去掉gulp-
前缀,之后再转换为驼峰命名。 实质上gulp-load-plugins
是为我们做了如下的转换:
1 2 plugins.rename = require ('gulp-rename' ); plugins.rubySass = require ('gulp-ruby-sass' );
gulp-load-plugins
并不会一开始就加载所有package.json
里的gulp插件,而是在我们需要用到某个插件的时候,才去加载那个插件。最后要提醒的一点是,因为gulp-load-plugins
是通过你的package.json
文件来加载插件的,所以必须要保证你需要自动加载的插件已经写入到了package.json
文件里,并且这些插件都是已经安装好了的。
重命名 使用 gulp-rename
安装:npm install --save-dev gulp-rename
用来重命名文件流中的文件。用gulp.dest()
方法写入文件时,文件名使用的是文件流中的文件名,如果要想改变文件名,那可以在之前用gulp-rename
插件来改变文件流中的文件名。
1 2 3 4 5 6 7 8 9 10 11 var gulp = require ('gulp' ), rename = require ('gulp-rename' ), uglify = require ("gulp-uglify" ); gulp.task('rename' , function ( ) { gulp.src('js/jquery.js' ) .pipe(uglify()) .pipe(rename('jquery.min.js' )) .pipe(gulp.dest('js' )); });
js文件压缩 使用 gulp-uglify
安装:npm install --save-dev gulp-uglify
用来压缩js文件,使用的是uglify
引擎
1 2 3 4 5 6 7 8 var gulp = require ('gulp' ), uglify = require ("gulp-uglify" ); gulp.task('minify-js' , function ( ) { gulp.src('js/*.js' ) .pipe(uglify()) .pipe(gulp.dest('dist/js' )); });
js模块化构建 使用 gulp-browserify
安装:npm install --save-dev gulp-browserify
前端js代码的模块化一直是前端工程师之痛,因为JS在ES6之前不支持 import
或者 require
这类的模块加载能力,需要借助 一些工具,比如 requireJS
、seaJS
等。但是 有了 browserify
,js代码代码只要编译之后,你可以大胆地 使用require()
,就像在node
环境里一样,而且它既支持commonJS
规范,也支持非commonJS
规范,但是为了提高准确率,还是自觉遵守commonJS
规范吧!
1 2 3 4 5 6 7 8 9 var gulp = require ('gulp' );var browserify = require ('gulp-browserify' );gulp.task('scripts' , ['clean' ], function ( ) { return gulp.src('src/js/**/*.js' ) .pipe(browserify()) .pipe(gulp.dest(JS_DEST)); });
css文件压缩 使用 gulp-minify-css
安装:npm install --save-dev gulp-minify-css
要压缩css文件时可以使用该插件
1 2 3 4 5 6 7 8 var gulp = require ('gulp' ), minifyCss = require ("gulp-minify-css" ); gulp.task('minify-css' , function ( ) { gulp.src('css/*.css' ) .pipe(minifyCss()) .pipe(gulp.dest('dist/css' )); });
html文件压缩 使用 gulp-minify-html
安装:npm install --save-dev gulp-minify-html
用来压缩html文件
1 2 3 4 5 6 7 8 var gulp = require ('gulp' ), minifyHtml = require ("gulp-minify-html" ); gulp.task('minify-html' , function ( ) { gulp.src('html/*.html' ) .pipe(minifyHtml()) .pipe(gulp.dest('dist/html' )); });
js代码检查 使用 gulp-jshint
安装:npm install --save-dev gulp-jshint
用来检查js代码
1 2 3 4 5 6 7 8 var gulp = require ('gulp' ), jshint = require ("gulp-jshint" ); gulp.task('jsLint' , function ( ) { gulp.src('js/*.js' ) .pipe(jshint()) .pipe(jshint.reporter()); });
文件合并 使用 gulp-concat
安装:npm install --save-dev gulp-concat
用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等,这样就能减少页面的http请求数了
1 2 3 4 5 6 7 8 var gulp = require ('gulp' ), concat = require ("gulp-concat" ); gulp.task('concat' , function ( ) { gulp.src('js/*.js' ) .pipe(concat('all.js' )) .pipe(gulp.dest('dist/js' )); });
less和sass的编译 less使用 gulp-less
安装:npm install --save-dev gulp-less
1 2 3 4 5 6 7 8 var gulp = require ('gulp' ), less = require ("gulp-less" ); gulp.task('compile-less' , function ( ) { gulp.src('less/*.less' ) .pipe(less()) .pipe(gulp.dest('dist/css' )); });
sass使用 gulp-sass
安装:npm install --save-dev gulp-sass
1 2 3 4 5 6 7 8 var gulp = require ('gulp' ), sass = require ("gulp-sass" ); gulp.task('compile-sass' , function ( ) { gulp.src('sass/*.sass' ) .pipe(sass()) .pipe(gulp.dest('dist/css' )); });
图片压缩 可以使用 gulp-imagemin
插件来压缩jpg、png、gif等图片。 安装:npm install --save-dev gulp-imagemin
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 var gulp = require ('gulp' );var imagemin = require ('gulp-imagemin' );var pngquant = require ('imagemin-pngquant' ); var cache = require ('gulp-cache' ); gulp.task('default' , function ( ) { return gulp.src('src/images/*' ) .pipe(cache(imagemin({ optimizationLevel: 5 , progressive: true , interlaced: true , multipass: true , svgoPlugins: [{removeViewBox : false }], use: [pngquant()] }))) .pipe(gulp.dest('dist' )); });
gulp-imagemin
的使用比较复杂一点,而且它本身也有很多插件,建议去它的项目主页 看看文档
自动刷新 使用gulp-livereload
插件,安装: npm install --save-dev gulp-livereload
当代码变化时,它可以帮我们自动刷新页面 该插件最好配合谷歌浏览器来使用,且要安装 livereload chrome extension
扩展插件,不能下载的请自行FQ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 var gulp = require ('gulp' ), less = require ('gulp-less' ), livereload = require ('gulp-livereload' ); gulp.task('less' , function ( ) { gulp.src('less/*.less' ) .pipe(less()) .pipe(gulp.dest('css' )) .pipe(livereload()); }); gulp.task('watch' , function ( ) { livereload.listen(); gulp.watch('less/*.less' , ['less' ]); });
清理编译环境 使用 gulp-clean
安装 npm install gulp-clean --save-dev
提交代码之前我们需要把本地的编译环境清理干净。
1 2 3 4 var clean = require ('gulp-clean' );gulp.task('clean' ,function ( ) { return gulp.src(['dist/assets/css' ,'dist/assets/js' ,'dist/assets/img' ],{read : false }).pipe(clean()); });
我们可以传入一个目录(或档案)阵列到gulp.src()
。因为我们不需要读取已经被删除的档案,我们可以加入read:false
选项来防止gulp读取档案内容让它快一些。
我的gulpfile.js 下面的是我花了一下午研究出来的gulp前端自动化管理的最佳实践的gulpfile.js这个文件的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 'use strict' ;var gulp = require ('gulp' ); var plugins = require ('gulp-load-plugins' )(); var env = process.env.NODE_ENV || 'development' ;var DEST = 'dist' ;var HTML_DEST = 'dist' ; var CSS_DEST = 'dist/static/css' ; var JS_DEST = 'dist/static/js' ; var IMG_DEST = 'dist/static/img' ; gulp.task('minify-html' , function ( ) { var options = { removeComments: true , collapseWhitespace: true , removeEmptyAttributes: true , minifyJS: true , minifyCSS: true }; return gulp.src('src/*.html' ) .pipe(plugins.htmlmin(options)) .pipe(gulp.dest(HTML_DEST)) .pipe(plugins.livereload()) .pipe(plugins.notify({ message: 'minify-html task complete' })); }) gulp.task('scripts' , function ( ) { return gulp.src('src/static/js/*.js' ) .pipe(plugins.jshint()) .pipe(plugins.jshint.reporter('default' )) .pipe(plugins.browserify()) .pipe(plugins.uglify()) .pipe(gulp.dest(JS_DEST)) .pipe(plugins.livereload()) .pipe(plugins.notify({ message: 'Scripts task complete' })); }); gulp.task('minify-css' , function ( ) { return gulp.src(['src/static/css/*.css' , 'src/static/css/**/*.css' ]) .pipe(plugins.autoprefixer()) .pipe(plugins.minifyCss()) .pipe(gulp.dest(CSS_DEST)) .pipe(plugins.livereload()) .pipe(plugins.notify({ message: 'minify-css task complete' })); }); var pngquant = require ('imagemin-pngquant' );gulp.task('images' , function ( ) { return gulp.src(['src/static/img/**/*' , 'src/static/img/*' ]) .pipe(plugins.cache(plugins.imagemin({ optimizationLevel: 5 , progressive: true , interlaced: true , svgoPlugins: [{removeViewBox : false }], use: [pngquant()] }))) .pipe(gulp.dest(IMG_DEST)) .pipe(plugins.livereload()) .pipe(plugins.notify({ message: 'Images task complete' })) }); gulp.task('copy' , function ( ) { return gulp.src('src/static/plugins/**/*' ) .pipe(gulp.dest('dist/static/plugins' )) }); gulp.task('clean' , function ( ) { return gulp.src([HTML_DEST, CSS_DEST, JS_DEST, IMG_DEST], { read : false }) .pipe(plugins.clean()) .pipe(plugins.notify({ message: 'Clean task complete' })); }); gulp.task('server' , function ( ) { gulp.src('dist' ) .pipe(plugins.webserver({ livereload: true , directoryListing: { path: 'index.html' , enable: true }, open: true })); }); gulp.task('watch' , function ( ) { plugins.livereload.listen(); gulp.watch('src/*.html' , ['minify-html' ]); gulp.watch(['src/static/css/*.css' , 'src/static/css/**/*.css' ], ['minify-css' ]); gulp.watch('src/static/js/*.js' , ['scripts' ]); gulp.watch(['src/static/img/**/*' , 'src/static/img/*' ], ['images' ]); }); gulp.task('build' , function (cb ) { plugins.sequence('clean' , ['minify-html' , 'scripts' , 'images' , 'minify-css' , 'copy' , 'watch' ])(cb) }); gulp.task('main' , function (cb ) { plugins.sequence('build' , ['server' ])(cb) }); gulp.task('default' , ['main' ]);