最近项目中使用 gulp, 熟练了对它的使用, 加深了理解.
分享自己的 gulp 案例, 安装的插件实现了 html CSS js 图片 的压缩, less 的转译, 本地服务开启, livereload 等
github 的仓库地址 (https://github.com/danny5101/gulp-test.git https://github.com/danny5101/gulp-test.git), 供 clone 参考.
项目文件结构如下:
gulp 启动前
进入 gulp-test 命令行输入 gulp minAll 后
gulpfilejavascript 代码
- var gulp = require('gulp');
- var del = require('del');
- var merge = require('gulp-merge');// 合并多个 stream 返回一个 stream
- var htmlmin = require('gulp-htmlmin');
- var cleancss = require('gulp-clean-css');
- var lesstocss = require('gulp-less');
- var uglify = require('gulp-uglify');
- var imagemin = require('gulp-imagemin');
- var postcss = require('gulp-postcss');
- var autoprefixer = require('autoprefixer');
- var cssnext = require('cssnext');
- var precss = require('precss');
- var connect = require('gulp-connect');
- var proxy = require('http-proxy-middleware');
- // 清除目录文件 - test
- // gulp.task('clean:deleted', function() {
- // return del([
- // 'src/deleted/**/*',
- // '!src/deleted/evaluation.css'
- // ])
- // });
- // 清除目录文件 dist
- gulp.task('clean:dist', function() {
- return del(['dist']);
- });
- // 复制文件
- gulp.task('copy:common', ['clean:dist'], function() {
- return gulp.src('src/common/**/*')
- .pipe(gulp.dest('dist/src/common'));
- });
- gulp.task('copy:jslibs', ['clean:dist'], function() {
- return gulp.src(['src/js/jquery-1.8.3.min.js','src/js/test-2.0.1.min.js'])
- .pipe(gulp.dest('dist/src/js'));
- });
- gulp.task('copy', ['copy:common', 'copy:jslibs']);
- // 压缩 html
- gulp.task('htmlmin', ['clean:dist'], function() {
- var options = {
- removeComments: true,// 清除 HTML 注释
- collapseWhitespace: true,// 压缩 HTML##!!! 慎用, 会去除应保留的空格
- collapseBooleanAttributes: true,// 省略布尔属性的值 <input checked="true"/> ==> <input />
- removeEmptyAttributes: true,// 删除所有空格作属性值 <input id="" /> ==> <input />
- removeScriptTypeAttributes: true,// 删除 < script > 的 type="text/javascript"
- removeStyleLinkTypeAttributes: true,// 删除 < style > 和 < link > 的 type="text/css"
- minifyJS: true,// 压缩页面 JS
- minifyCSS: true// 压缩页面 CSS
- };
- return gulp.src(['src/html/*.html'])
- .pipe(htmlmin(options))
- .pipe(gulp.dest('dist/src/html'));
- });
- // less 转为 css
- gulp.task('lesstocss', function() {
- return gulp.src(['src/css/*.less'])
- .pipe(lesstocss())
- .pipe(gulp.dest('src/css'));
- });
- // css 处理
- gulp.task('css', ['clean:dist', 'lesstocss'], function() {
- var processors = [
- autoprefixer,
- cssnext,
- precss
- ];
- var cssSream1 = gulp.src(['src/css/*.css'])
- .pipe(postcss(processors))
- .pipe(cleancss())
- .pipe(gulp.dest('dist/src/css'));
- return cssSream1;
- // 等同于上面的一段, a sample of merging stream
- /*var cssSream1 = gulp.src('src/css/base.css')
- .pipe(postcss(processors))
- .pipe(cleancss())
- .pipe(gulp.dest('dist/src/css'));
- var cssSream2 = gulp.src('src/css/evaluation.css')
- .pipe(postcss(processors))
- .pipe(cleancss())
- .pipe(gulp.dest('dist/src/css'));
- var cssSream3 = gulp.src('src/css/evatest.css')
- .pipe(postcss(processors))
- .pipe(cleancss())
- .pipe(gulp.dest('dist/src/css'));
- return merge(cssSream1, cssSream2, cssSream3);*/
- });
- // 压缩 js
- gulp.task('jsmin', ['clean:dist'], function() {
- return gulp.src(['src/js/**/*.js', '!src/js/**/{jquery-1.8.3.min,test-2.0.1.min}.js'])//** 匹配 src/js 下的 0 个或多个子文件夹
- .pipe(uglify({// 配置文档 https://github.com/mishoo/UglifyJS2#mangle-properties-options
- mangle: true,// 类型: Boolean 默认: true 是否修改变量名
- compress: true,// 类型: Boolean 默认: true 是否完全压缩
- /*output: {
- comments: true// (default false) -- pass true or "all" to preserve all comments
- }*/
- }))
- .pipe(gulp.dest('dist/src/js'));
- });
- // 压缩图片
- gulp.task('imagemin', ['clean:dist'], function(){
- return gulp.src(['src/image/*.{jpg,png,gif,ico}'])
- .pipe(imagemin({
- optimizationLevel: 5, // 类型: Number 默认: 3 取值范围: 0-7(优化等级)
- progressive: true, // 类型: Boolean 默认: false 无损压缩 jpg 图片
- interlaced: true, // 类型: Boolean 默认: false 隔行扫描 gif 进行渲染
- multipass: true // 类型: Boolean 默认: false 多次优化 svg 直到完全优化
- }))
- .pipe(gulp.dest('dist/src/image'));
- });
- // 开启本地服务
- gulp.task('connect', function() {
- connect.server({
- root: '.',
- livereload: true,
- middleware: function(connect, opt) {
- return [
- /*function cors(req, res, next) {
- res.setHeader('Access-Control-Allow-Origin', '*')
- res.setHeader('Access-Control-Allow-Methods', '*')
- next()
- }*/
- proxy('/lincombFront', {
- target: 'http://172.16.105.223:8003',
- changeOrigin: true
- })
- ]
- }
- })
- });
- // reload
- gulp.task('htmlLive', function() {
- gulp.src(['src/html/*.html'])
- .pipe(connect.reload());
- });
- gulp.task('cssLive', function() {
- gulp.src(['src/css/*.css'])
- .pipe(connect.reload());
- });
- gulp.task('jsLive', function() {
- gulp.src(['src/js/**/*.js', '!src/js/**/{jquery-1.8.3.min,test-2.0.1.min}.js'])
- .pipe(connect.reload());
- });
- gulp.task('imageLive', function() {
- gulp.src(['src/image/*.{jpg,png,gif,ico}'])
- .pipe(connect.reload());
- });
- gulp.task('watch', function() {
- gulp.watch(['src/html/*.html'], ['htmlLive']);
- gulp.watch(['src/css/*.less'], ['lesstocss']);// less 实时编译
- gulp.watch(['src/css/*.css'], ['cssLive']);
- gulp.watch(['src/js/**/*.js', '!src/js/**/{jquery-1.8.3.min,test-2.0.1.min}.js'], ['jsLive']);
- gulp.watch(['src/image/*.{jpg,png,gif,ico}'], ['imageLive']);
- });
- gulp.task('default', ['connect', 'watch']);
- gulp.task('minAll', ['copy', 'htmlmin', 'css', 'jsmin', 'imagemin']);
- .js
- package.json
json 代码
- {
- "name": "gulp-test",
- "version": "1.0.0",
- "description": "demo of learning gulp",
- "main": "index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1"
- },
- "author": "",
- "license": "ISC",
- "devDependencies": {
- "autoprefixer": "^7.1.6",
- "cssnext": "^1.8.4",
- "del": "^3.0.0",
- "gulp": "^3.9.1",
- "gulp-clean-css": "^3.9.0",
- "gulp-connect": "^5.0.0",
- "gulp-htmlmin": "^3.0.0",
- "gulp-imagemin": "^3.4.0",
- "gulp-less": "^3.3.2",
- "gulp-merge": "^0.1.1",
- "gulp-postcss": "^7.0.0",
- "gulp-uglify": "^3.0.0",
- "http-proxy-middleware": "^0.17.4",
- "precss": "^2.0.0"
- }
- }
来源: http://www.qdfuns.com/article/27497/97d502c79ecd6d1471ff5261612c5f9f.html