gulp（gulpfile.js）配置文件

  1 /*
  2 参考代码网址：
  3 http://www.ido321.com/1622.html
  4 http://colobu.com/2014/11/17/gulp-plugins-introduction/#gulp-rename
  5 https://github.com/nimojs/gulp-book
  6  */
  7 // 获取 gulp
  8 var gulp = require(‘gulp‘),
  9     // js 压缩插件 （用于压缩 JS）
 10     uglify = require(‘gulp-uglify‘),
 11     // 压缩css插件(cssnano将取代gulp-minify-css)
 12     minifyCSS = require(‘gulp-minify-css‘),
 13     cssnano = require(‘gulp-cssnano‘),
 14     // 获取 gulp-imagemin 模块
 15     imagemin = require(‘gulp-imagemin‘),
 16     // 重命名 插件
 17     rename = require(‘gulp-rename‘),
 18     // 压缩html插件
 19     htmlmin = require(‘gulp-htmlmin‘),
 20     // 合并文件
 21     concat = require("gulp-concat"),
 22     // html 文件对合并文件后的替换处理插件
 23     htmlReplace = require("gulp-html-replace"),
 24     // 复制文件（文件拷贝）
 25     copy = require(‘copy‘);
 26
 27 // 版本号
 28 var APP_VERSION = ‘v.1.0‘;
 29
 30
 31 // 压缩 js 文件
 32 // 在命令行使用 gulp script 启动此任务
 33 gulp.task(‘script‘, function() {
 34     // 1. 找到文件
 35     gulp.src(‘js/*.js‘)
 36     // 2. 压缩文件
 37         .pipe(uglify())
 38     // new: 压缩前修改压缩后新文件名字
 39         .pipe(rename( function(path){
 40           path.basename += "_" + APP_VERSION;
 41         } ) )
 42     // 3. 另存压缩后的文件
 43         .pipe(gulp.dest(‘dist/js‘))
 44 });
 45
 46 // 压缩 css 文件
 47 // 在命令行使用 gulp css 启动此任务
 48 gulp.task(‘css‘, function () {
 49     // 1. 找到文件
 50     gulp.src(‘css/*.css‘)
 51     // 2. 压缩文件
 52         .pipe(minifyCSS())
 53     // 3. 另存为压缩文件
 54         .pipe(gulp.dest(‘dist/css‘))
 55 });
 56
 57 // 压缩图片任务
 58 // 在命令行输入 gulp images 启动此任务
 59 gulp.task(‘images‘, function () {
 60     // 1. 找到图片
 61     gulp.src(‘images/*.*‘)
 62     // 2. 压缩图片
 63         .pipe(imagemin({
 64             progressive: true
 65         }))
 66     // 3. 另存图片
 67         .pipe(gulp.dest(‘dist/images‘))
 68 });
 69
 70 // 合并js 任务(合并压缩成功后的 js文件)
 71 gulp.task(‘concat‘, function () {
 72     gulp.src(‘dist/js/*.js‘)  //要合并的文件
 73     .pipe( concat(‘all.js‘) )  // 合并匹配到的js文件并命名为 "all.js"
 74     .pipe( gulp.dest(‘dist/js‘) );
 75 });
 76
 77 // 解决 gulp 合并文件后， html调用代码对应替换
 78 gulp.task(‘htmlreplace‘, function(){
 79   gulp.src(‘canvas_test.html‘)
 80       .pipe( htmlReplace({‘js‘: ‘js/all.js‘}) )
 81       .pipe( gulp.dest(‘dist/‘) );
 82 });
 83 // 压缩html 任务
 84 gulp.task(‘htmlmin‘, function () {
 85     var options = {
 86         collapseWhitespace: true,//压缩HTML
 87         //省略布尔属性的值 <input checked="true"/> ==> <input />
 88         collapseBooleanAttributes: false,
 89         //删除所有空格作属性值 <input id="" /> ==> <input />
 90         removeEmptyAttributes: true,
 91         //删除<script>的type="text/javascript"
 92         removeScriptTypeAttributes: true,
 93         //删除<style>和<link>的type="text/css"
 94         removeStyleLinkTypeAttributes: true,
 95         minifyJS: true,//压缩页面JS
 96         minifyCSS: true//压缩页面CSS
 97     };
 98     gulp.src(‘*.html‘)
 99         .pipe(htmlmin(options))
100         .pipe(gulp.dest(‘dist‘));
101 });
102
103 // 清除文件任务
104 gulp.task(‘clean‘, function(cb){
105    del([‘dist/*‘]);
106    cb();
107 });
108
109 // 复制任务(连续复制多个文件时，最好加上回调函数)
110 gulp.task(‘copy‘, function(cb){
111     copy([‘copy_file2.txt‘, ‘copy_file.txt‘], ‘dist/‘);
112     cb();
113 });
114
115
116 /*************************************************************
117  *                         组合任务
118  ************************************************************/
119
120 // js 压缩合并任务
121 gulp.task(‘ugconjs‘, function(){
122     // 1. 找到文件
123     gulp.src([‘js/concat_base.js‘, ‘js/uglify_utils.js‘])
124     // 2. 压缩文件
125         .pipe(uglify())
126     // 3. 合并成一个文件
127         .pipe( concat(‘all.js‘) )
128     // 4. 改名
129         .pipe(rename( function(path){
130           path.basename += "_" + APP_VERSION;
131         } ) )
132     // 5. 另存压缩后的文件
133         .pipe(gulp.dest(‘dist/js‘))
134 });
135
136 // 组合任务： 先替换html再压缩
137 gulp.task(‘htmlcomp‘, function(){
138   var options = {
139     collapseWhitespace: true,//压缩HTML
140     //省略布尔属性的值 <input checked="true"/> ==> <input />
141     collapseBooleanAttributes: false,
142     //删除所有空格作属性值 <input id="" /> ==> <input />
143     removeEmptyAttributes: true,
144     //删除<script>的type="text/javascript"
145     removeScriptTypeAttributes: true,
146     //删除<style>和<link>的type="text/css"
147     removeStyleLinkTypeAttributes: true,
148     minifyJS: true,//压缩页面JS
149     minifyCSS: true//压缩页面CSS
150   };
151   gulp.src(‘canvas_test.html‘)
152       .pipe( htmlReplace({‘js‘: ‘js/all_‘ + APP_VERSION + ‘.js‘}) )
153       .pipe( htmlmin(options) )
154       .pipe( gulp.dest(‘dist/‘) );
155 });
156
157 // 默认任务
158 gulp.task(‘default‘, [‘clean‘], function(){
159     gulp.start(‘ugconjs‘, ‘htmlcomp‘, ‘copy‘, ‘css‘, ‘images‘);
160 });
161
162 /*************************************************************
163  *               本地js  html css本地压缩
164  ************************************************************/
165 // 字符串拷贝进 js/str.js 中, 然后运行 `gulp str-js`
166 gulp.task(‘str-js‘, function() {
167     gulp.src(‘js/str.js‘)
168         .pipe(uglify())
169         .pipe(gulp.dest(‘dist/js‘));
170 });
171 // 字符串拷贝进 css/str.css 中, 然后运行 `gulp str-css`
172 gulp.task(‘str-css‘, function () {
173     gulp.src(‘css/str.css‘)
174         .pipe(cssnano())
175         .pipe(gulp.dest(‘dist/css‘));
176 });
177 // 字符串拷贝进 str.html 中, 然后运行 `gulp str-html`
178 gulp.task(‘str-html‘, function () {
179     var options = {
180         collapseWhitespace: true,//压缩HTML
181         //省略布尔属性的值 <input checked="true"/> ==> <input />
182         collapseBooleanAttributes: false,
183         //删除所有空格作属性值 <input id="" /> ==> <input />
184         removeEmptyAttributes: true,
185         //删除<script>的type="text/javascript"
186         removeScriptTypeAttributes: true,
187         //删除<style>和<link>的type="text/css"
188         removeStyleLinkTypeAttributes: true,
189         minifyJS: true,//压缩页面JS
190         minifyCSS: true//压缩页面CSS
191     };
192     gulp.src(‘str.html‘)
193         .pipe(htmlmin(options))
194         .pipe(gulp.dest(‘dist‘));
195 });