1. 全局安装 gulp：
1 2 | $ npm install --global gulp |
2. 作为项目的开发依赖（devDependencies）安装：
1 2 | $ npm install --save-dev gulp |
3. 在项目根目录下创建一个名为 gulpfile.js 的文件：
1 2 3 4 5 6 | <span class="hljs-keyword">var</span> gulp = <span class="hljs-built_in">require</span>(<span class="hljs-string">'gulp'</span>); gulp.task(<span class="hljs-string">'default'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{ <span class="hljs-comment">// 将你的默认的任务代码放在这</span> }); |
4. 运行 gulp：
1 2 | $ gulp |
默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入 gulp <task> <othertask>。
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 | var gulp = require('gulp'); var minifycss = require('gulp-minify-css'); var concat = require('gulp-concat'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var htmlmin = require('gulp-htmlmin'); var del = require('del'); var imagemin = require('gulp-imagemin'); //压缩图片 ; //压缩css gulp.task('indexcss', function () { gulp.src(['css/css.css', './js/bootstrap/css/bootstrap.min.css', './js/bootstrap/non-responsive.css', 'css/main.css']) //压缩的文件 .pipe(concat('main.css')) .pipe(gulp.dest('./dist/css')) //输出文件夹 .pipe(minifycss()); //执行压缩 }); //压缩js gulp.task('indexjs', function () { gulp.src(["./js/lib/jquery-1.9.1.min.js", "./js/bootstrap/js/bootstrap.min.js", "./js/lib/jqueryui/jquery-ui.min.js", "./js/lib/jquery.cookie.js", "./js/lib/avalon.js", "./js/lang.js", "./js/util.js", "./js/lib/html2canvas.min.js", "./js/component.js", "./js/page/index.js"]) .pipe(concat('index.main.js')) //合并所有js到main.js .pipe(gulp.dest('./dist/js')) //输出main.js到文件夹 .pipe(rename({ suffix: '.min' })) //rename压缩后的文件名 .pipe(uglify({ mangle: false,//类型：Boolean 默认：true 是否修改变量名 compress: false//类型：Boolean 默认：true 是否完全压缩 })) //压缩 .pipe(gulp.dest('./dist/js')); //输出 }); // 压缩图片 gulp.task('testimage', function () { gulp.src('image/*.*') .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/image')); }); // 压缩html gulp.task('compressHtml', function () { gulp.src('*.html') .pipe(htmlmin({ 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 })) .pipe(gulp.dest('./dist')); }); gulp.task('clean', function (cb) { del(['./dist/css', './dist/js'], cb) }); gulp.task('default', function () { gulp.start('indexcss', 'indexjs', 'testimage', 'compressHtml'); }); |
膜拜下