gulp入门
入门
http://www.tuicool.com/articles/FJVNZf
1、全局安装
sudo npm install -g gulp
以下需要进入项目目录:
2、项目安装
如果项目需要其他nodejs其它包,请先创建package.json,只用gulp,可以直接使用下面命令
cnpm install --save-dev gulp
3、安装gulp组件
例如:
npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev
4、创建 gulpfile.js
// 引入 gulp var gulp = require('gulp'); // 引入组件 var jshint = require('gulp-jshint'); var sass = require('gulp-sass'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); // 检查脚本 gulp.task('lint', function() { gulp.src('./js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); // 编译Sass gulp.task('sass', function() { gulp.src('./scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./css')); }); // 合并,压缩文件 gulp.task('scripts', function() { gulp.src('./js/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('./dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('./dist')); }); // 默认任务 gulp.task('default', function(){ gulp.run('lint', 'sass', 'scripts'); // 监听文件变化 gulp.watch('./js/*.js', function(){ gulp.run('lint', 'sass', 'scripts'); }); });
5、命令行执行 gulp 即可
gulp default
6、其它
gulp只有五个方法: task
, run
, watch
, src
,和 dest
。
gulp本身不会处理,所有处理都需要第三方的组件
一些组件:
gulp-jshint 会检查js文件有没有报错或警告
gulp-htmlmin 压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作
gulp-uglify 压缩javascript文件,减小文件大小 注意还有合并,改名等,参见上面
gulp-clean-css 压缩css文件,减小文件大小,并给引用url添加版本号避免缓存