内容简介：Gulp配置文件详解
前言
前几天写了gulp的基础自动化构建的api。
gulp.src 文件源位置 gulp.task 构建任务名和函数 gulp.dest 放置文件位置 gulp.watch 监控
这次介绍下gulp的几个常用插件和其基本配置：
gulp常用插件
注意: + "使用插件前要先安装对应插件 npm install 插件名字 --save-dev" + "如果构建的任务没有放在默认任务default中 命令行执行的时候 gulp 任务名" + "task中路径都是与gulpfile放在同一级下" + "gulp.dest()指明的目录可以自动被创建"
js压缩，合并，重命名任务
let gulp = require('gulp');
let concat = require('gulp-concat'); // 合并
let uglify = require('gulp-uglify'); // 压缩
let rename = require('gulp-rename'); // 重命名
let jshint = require('gulp-jshint'); // 注意需要同时安装 jshint
gulp.task('scripts', function() { // 这个任务的名称是 scripts
gulp.src('src/js/*.js') // 将 src/js/ 目录下的所有 js 文件合并
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('all.js')) // 指定合并后的文件名为 all.js
.pipe(gulp.dest('dist/js/')) // 保存合并后的文件
.pipe(uglify()) // 压缩
.pipe(rename('all.min.js')) // 重命名
.pipe(rename({suffix: '.min'})) // 和上一行等效
.pipe(gulp.dest('dist/js/'));
});
sass编译
let gulp = require('gulp');
let sass = require('gulp-sass'); // sass -> css
let prefixer = require('gulp-autoprefixer'); // 增加前缀
let minify = require('gulp-minify-css'); // css 压缩
let notify = require('gulp-notify'); // 打印提醒语句
let concat = require('gulp-concat'); // 合并
// 编译Sass
gulp.task('css', function() { // 任务名
gulp.src('sass/*.scss') // 目标 sass 文件
.pipe(sass()) // sass -> css
.pipe(prefixer('last 2 versions')) // 参数配置参考 <https://github.com/ai/browserslist>
.pipe(minify()) // 压缩
.pipe(gulp.dest('css')) // 目标目录
.pipe(notify({message: 'done'}))
.pipe(concat('all.min.css')) // 合并
.pipe(gulp.dest('css')); // 目标目录
});
图片压缩
let gulp = require('gulp');
let imagemin = require('gulp-imagemin');
let cache = require('gulp-cache'); // 减少重复压缩
gulp.task('images', function() {
gulp.src('src/images/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images/'));
});
监控文件
gulp.task('watch', function() { // 指定任务名为 watch
gulp.watch('src/sass/a.scss', ['sass']);// 监控 a.scss 文件，如果有修改，则执行 sass 任务
});
删除文件
let gulp = require('gulp');
let clean = require('gulp-clean');
gulp.task('clean', function() {
return gulp.src(['dist/js/*', 'dist/sass/*', 'dist/images/*'], {read: false})
.pipe(clean());
});
ES6->ES5
安装插件 npm install gulp-babel babel-preset-es2015 --save-dev
let gulp = require('gulp');
let babel = require('gulp-babel');
gulp.task('scripts', function() {
gulp.src('src/js/a.js')
.pipe(babel({ // es6 -> es5
presets: ['es2015']
}))
.pipe(gulp.dest('dist/js/'))
});
参考文章： http://www.cnblogs.com/zichi/p/6250504.html
总结
除此之外还有很多插件可供安装，如果引入插件很多可以尝试使用 gulp-load-plugin模块、还有borswer-sync等模块，由于这方面我还没有认真看过所以这里就不详细介绍了，如果个人在刚学gulp的话，我推荐多敲几遍gulpfile.js的配置文件，尝试一些自动化构建自己的小项目，然后根据项目需求再引入其他插件使用或者使用模块。
以上所述就是小编给大家介绍的《Gulp配置文件详解》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
