gulp 初体验
查看 NPM 版本
$ npm --version
简写
$ npm -v
全局安装 Gulp CLI
$ npm install -g gulp-cli
初始化 Node 模块 package.json
$ npm init
安装 package.json 中的插件
$ npm install
安装本地 Gulp
$ npm install --save-dev gulp
简写
$ npm install -D gulp
安装 Gulp4 (推荐)
$ npm install --save-dev gulpjs/gulp.git#4.0
安装插件
$ npm install --save-dev <plugin-name>
创建 Gulpfile.js
var gulp = require('gulp'); var del = require('del'); var jshint = require('gulp-jshint'); //检查 js 文件代码风格 需要安装插件 jshint gulp-jshint var uglify = require('gulp-uglify'); //压缩 js 文件 var concat = require('gulp-concat'); //合并文件 var less = require('gulp-less'); var minifyCSS = require('gulp-cssnano'); var prefix = require('gulp-autoprefixer'); var bSync = require('browser-sync'); //搭建实时更新服务器 //安装插件 cnpm install -D del jshint gulp-jshint gulp-uglify gulp-concat gulp-less gulp-cssnano gulp-autoprefixer browser-sync //gulp.task 提供命令行直接调用这个函数的接口 //删除构建目录 gulp.task('clean', function () { return del(['dist']); }); //处理 CSS gulp.task('styles', function () { return gulp.src('app/styles/main.less') .pipe(less()) .pipe(minifyCSS()) .pipe(prefix()) .pipe(gulp.dest('dist/styles')); }); //检查 js 代码风格 gulp.task('tests', function () { return gulp.src(['app/scripts/**/*.js', '!app/scripts/plugin/**/*.js']) .pipe(jshint()) .pipe(jshint.reporter('default')) // 对代码进行报错提示 .pipe(jshint.reporter('fail')); }); //处理 JS gulp.task('scripts', gulp.series('tests', function scriptsInternal() { return gulp.src('app/scripts/**/*.js') //创建文件的可读流 .pipe(concat('main.min.js')) .pipe(uglify()) .pipe(gulp.dest('dist/scripts')); //文件保存位置 }) ); //搭建实时更新服务器 gulp.task('server', function (done) { bSync({ server:{ baseDir:['dist','app'] } }); done(); //task 完成时通知 Gulp }); //依赖链 //gulp.series 顺序执行 Gulp task //gulp.parallel 并行执行 Gulp task gulp.task('default', gulp.series('clean', gulp.parallel('styles','scripts'), 'server', function watcher(done) { //检测文件变化 gulp.watch(['app/scripts/**/*.js', '!app/scripts/plugin/**/*.js'],gulp.parallel('scripts')); gulp.watch('app/styles/main.less',gulp.parallel('styles')); gulp.watch('dist/**/*',bSync.reload()); done(); } ) );
参考:《Web前端自动化构建:Gulp、Bower和Yeoman开发指南》
更多资料: