gulpfile.js 文件配置

  1     // --本地服务器
  2     var gulp = require(‘gulp‘),
  3         browserSync = require(‘browser-sync‘).create(),
  4         // SSI = require(‘browsersync-ssi‘),
  5         reload = browserSync.reload,
  6         watch = require(‘gulp-watch‘),
  7         uglify = require(‘gulp-uglify‘),
  8         concat = require(‘gulp-concat‘),
  9         jshint = require(‘gulp-jshint‘),
 10         csscomb = require(‘gulp-csscomb‘),
 11         csslint = require(‘gulp-csslint‘),
 12         csso = require(‘gulp-csso‘),
 13         prefixer = require(‘gulp-autoprefixer‘),
 14         clean = require(‘gulp-clean‘),
 15         rename = require("gulp-rename"),
 16         zip = require(‘gulp-zip‘),
 17         imagemin = require(‘gulp-imagemin‘),
 18         pngquant = require(‘imagemin-pngquant‘),
 19         template = require(‘gulp-template‘),
 20         processhtml = require(‘gulp-processhtml‘),
 21         gulpif = require(‘gulp-if‘),
 22         minimist = require(‘minimist‘),
 23         fileinclude = require(‘gulp-file-include‘),
 24         shell = require(‘gulp-shell‘),
 25         less = require(‘gulp-less‘),
 26         config = require(‘./config.json‘),
 27         //确保本地已安装gulp-sourcemaps [cnpm install gulp-sourcemaps --save-dev]
 28         sourcemaps = require(‘gulp-sourcemaps‘),
 29         combiner = require(‘stream-combiner2‘),
 30         //确保本地已安装gulp-minify-css [cnpm install gulp-minify-css --save-dev]
 31         cssmin = require(‘gulp-minify-css‘);
 32         //确保本地已安装gulp-less [cnpm install gulp-less --save-dev]
 33 
 34     var knownOptions = {
 35         string: ‘env‘,
 36         default: {
 37             env: process.env.NODE_ENV || ‘dev‘
 38         }
 39     };
 40 
 41     var filetask = {
 42         string: ‘file‘,
 43         default: {
 44             file: process.env.NODE_ENV || ‘all‘
 45         }
 46     };
 47 
 48     // --env dev
 49     // --env pro
 50 
 51     var options = minimist(process.argv.slice(2), knownOptions, filetask);
 52 
 53 
 54     // ----- js -----
 55     gulp.task(‘jstask‘, function() {
 56         if (!options.file) {
 57             console.log(‘检查全部js文件‘);
 58             console.log(‘运行gulp jstask --file 文件名，查看对应文件错误信息‘);
 59             return gulp.src(‘./images/*.js‘)
 60                 // .pipe(watch(‘./src/images/*.js‘)) // 只重新编译被更改过的文件
 61                 // js检查
 62                 .pipe(jshint())
 63                 .pipe(jshint.reporter(‘fail‘));
 64         } else {
 65             console.log(‘检查js文件: ./images/‘ + options.file);
 66             return gulp.src(‘./images/‘ + options.file)
 67                 // .pipe(watch(‘./src/images/*.js‘)) // 只重新编译被更改过的文件
 68                 // js检查
 69                 .pipe(jshint())
 70                 .pipe(jshint.reporter(‘default‘));
 71         }
 72 
 73     });
 74 
 75 
 76 
 77     // js压缩发布
 78     gulp.task(‘jstask-min‘, [‘jstask‘], function() {
 79         return gulp.src(‘./build/*.js‘)
 80             // 合并js
 81             .pipe(concat(‘main.min.js‘))
 82             // 压缩js
 83             .pipe(uglify())
 84             .pipe(gulp.dest(‘./build‘));
 85     });
 86 
 87     //js/css压缩发布-首页优化
 88     gulp.task("csstask-min-index",function(){
 89         gulp.src([‘./images/iconfont.css‘,‘./images/l_base.css‘,‘./images/l_module.css‘,‘./images/index.css‘])
 90             .pipe(concat(‘index-min.css‘))
 91             .pipe(gulp.dest(‘./images‘));
 92     });
 93     gulp.task("jstask-min-index",function(){
 94         gulp.src([‘./images/jquery-1.8.3.min.js‘,
 95                     ‘./images/jquery.cookie.js‘,
 96                     ‘./images/svg-min.js‘,
 97                     ‘./images/l_obox.js‘,
 98                     ‘./images/l_module.js‘,
 99                     ‘./images/l_base.js‘,
100                     ‘./images/idangerous.swiper2.7.6.min.js‘,
101                     ‘./images/index.js‘,
102                     ‘./images/templete_nav_search.js‘])
103             .pipe(concat(‘index-min.js‘))
104             .pipe(gulp.dest(‘./images‘));
105     });
106 
107 
108     // ----- css -----
109     gulp.task(‘csstask‘, function() {
110         if (!options.file) {
111             console.log(‘检查全部css‘);
112             console.log(‘运行gulp csstask --file 文件名，查看对应文件错误信息‘);
113 
114             return gulp.src(‘./images/*.css‘)
115                 // css检查
116                 .pipe(csslint())
117                 .pipe(csslint.reporter(‘fail‘));
118 
119         } else {
120             console.log(‘检查css文件: ./images/‘ + options.file);
121             return gulp.src(‘./images/‘ + options.file)
122                 // .pipe(watch(‘./src/images/*.css‘)) // 只重新编译被更改过的文件
123                 // css检查
124                 .pipe(csslint())
125                 .pipe(csslint.reporter());
126 
127             // css私有变量补全
128             // .pipe(prefixer())
129             // css顺序调整
130             // .pipe(csscomb())
131             // .pipe(gulp.dest(‘./build/images‘))
132             // .pipe(gulp.dest(‘./build‘))
133         }
134 
135     });
136 
137 
138     // css压缩发布
139     gulp.task(‘csstask-min‘, [‘csstask‘], function() {
140         return gulp.src(‘./build/*.css‘)
141             //压缩css
142             .pipe(csso())
143             .pipe(gulp.dest(‘./build/‘));
144     });
145 
146 
147     // ----- html 内容替换 -----
148 
149     // html预览监测
150     gulp.task(‘public‘, function() {
151         return gulp.src(‘./static/public/*‘)
152             .pipe(gulp.dest(‘./preview/public‘));
153     });
154 
155     gulp.task(‘contenttask‘, [‘public‘], function() {
156         console.log(‘打包环境: ‘+options.env);
157         return gulp.src(‘./template/**/*.{html,shtml}‘)
158             // .pipe(watch(‘./src/*.{html,shtml}‘)) // 只重新编译被更改过的文件
159             // 替换内容
160 
161         .pipe(gulpif(options.env === ‘dev‘, template(config.dev_template,{‘interpolate‘:/<%=([\s\S]+?)%>/g})))
162             .pipe(gulpif(options.env === ‘pro‘, template(config.pro_template,{‘interpolate‘:/<%=([\s\S]+?)%>/g})))
163             // .pipe(gulpif(options.env === ‘production‘, processhtml()))
164             // 替换引用
165             .pipe(processhtml())
166             .pipe(gulp.dest(‘./build‘))
167 
168             .pipe(gulpif(options.env === ‘dev‘, shell([‘touch <%= siteId %>.site‘], {
169                 templateData: {
170                     siteId: config.testSiteId
171                 }
172             })))
173             .pipe(gulpif(options.env === ‘pro‘, shell([‘touch <%= siteId %>.site‘], {
174                 templateData: {
175                     siteId: config.proSiteId
176                 }
177             })));
178 
179 
180     });
181 
182     gulp.task(‘contenttask-preview‘,[‘public‘],  function() {
183         return gulp.src(‘./static/**/*.{html,shtml}‘)
184             // 替换内容
185             .pipe(template(config.preview_template))
186             // 替换引用
187             .pipe(processhtml())
188             .pipe(fileinclude({
189                 prefix: ‘@@‘,
190                 basepath: ‘@file‘
191             }))
192             .pipe(gulp.dest(‘./preview‘));
193     });
194 
195 
196 
197     gulp.task(‘contenttask-watch‘, [‘public‘], function() {
198         return gulp.src(‘./static/**/*.{html,shtml}‘)
199             .pipe(watch(‘./static/**/*.{html,shtml}‘)) // 只重新编译被更改过的文件
200             // 替换内容
201             .pipe(template(config.debug_template))
202             // 替换引用
203             .pipe(processhtml())
204             .pipe(fileinclude({
205                 prefix: ‘@@‘,
206                 basepath: ‘@file‘
207             }))
208             .pipe(gulp.dest(‘./preview‘));
209     });
210 
211 
212 
213 
214 
215     // ----- 文件操作 -----
216 
217     // 文件清理
218     gulp.task(‘clean‘, function() {
219         return gulp.src([‘./build‘, ‘./preview‘, ‘./*.site‘], {
220                 read: false
221             })
222             .pipe(clean({
223                 force: true
224             }));
225     });
226 
227     gulp.task(‘clean-build‘, function() {
228         return gulp.src([‘./build‘], {
229                 read: false
230             })
231             .pipe(clean({
232                 force: true
233             }));
234     });
235 
236     gulp.task(‘clean-preview‘, function() {
237         return gulp.src([‘./preview‘], {
238                 read: false
239             })
240             .pipe(clean({
241                 force: true
242             }));
243     });
244 
245     // ----- 压缩图片 -----
246 
247     //压缩图片 - imagemin
248     gulp.task(‘imagemin‘, function() {
249         return gulp.src(‘./images/*.{png,jpg,jpeg,gif}‘)
250             .pipe(imagemin({
251                 progressive: true,
252                 svgoPlugins: [{
253                     removeViewBox: false
254                 }],
255                 use: [pngquant({
256                     quality: ‘100‘
257                 })]
258             }))
259             .pipe(gulp.dest(‘./images‘));
260     });
261 
262     //编译less
263 
264 
265     gulp.task("testLess",function(){
266         var combined = combiner.obj([
267             gulp.src("./images/less/*.less"),
268             watch("./images/less/*.less"),
269             // sourcemaps.init(),
270             less(),
271             cssmin(),
272             // sourcemaps.write(‘./maps‘),
273             gulp.dest("./images")
274         ]);
275 
276         combined.on(‘error‘, function(){
277             console.error.bind(console)
278         });
279         return combined;
280      });
281 
282     gulp.task(‘lesstask‘, function() {
283         return gulp.watch(‘./images/less/*.less‘, [‘testLess‘]);
284     });
285 
286     gulp.task("less-build",function(){
287         var changeFileArr = []
288         var fileArr = []
289         if (options.file && typeof(options.file) == ‘string‘) {
290             changeFileArr = options.file.split(‘,‘)
291             for (var i = 0; i < changeFileArr.length; i++) {
292                 if (changeFileArr[i].indexOf(‘/less/‘) > 0) {
293                     fileArr.push(‘../‘ + changeFileArr[i])
294                 }
295             }
296         }
297 
298         var combined = combiner.obj([
299             gulp.src(fileArr),
300             // sourcemaps.init(),
301             less(),
302             cssmin(),
303             // sourcemaps.write(‘./maps‘),
304             gulp.dest("./images")
305         ]);
306 
307         combined.on(‘error‘, function(){
308             console.error.bind(console)
309         });
310         return combined;
311     })
312 
313     gulp.task("lessBuildAll",function(){
314         var combined = combiner.obj([
315             gulp.src("./images/less/*.less"),
316             // sourcemaps.init(),
317             less(),
318             cssmin(),
319             // sourcemaps.write(‘./maps‘),
320             gulp.dest("./images")
321         ]);
322 
323         combined.on(‘error‘, function(){
324             console.error.bind(console)
325         });
326         return combined;
327     })
328 
329     // 开启本地 Web 服务器功能
330     gulp.task(‘webserver-static‘, function() {
331         // 开发预览
332         browserSync.init({
333             port: config.serverPort,
334             server: {
335                 baseDir: ["preview", "./"],
336                 directory: true,
337                 middleware: function(req, res, next) {
338                     var fs = require(‘fs‘);
339                     var ssi = require(‘ssi‘);
340                     var baseDir = ‘./preview/‘;
341                     var pathname = require(‘url‘).parse(req.url).pathname;
342                     var filename = require(‘path‘).join(baseDir, pathname.substr(-1) === ‘/‘ ? pathname + ‘index.html‘ : pathname);
343 
344                     var parser = new ssi(baseDir, baseDir, ‘/**/*.shtml‘,true);
345                     if (filename.indexOf(‘.shtml‘) > -1 && fs.existsSync(filename))
346                         res.end(parser.parse(filename, fs.readFileSync(filename, {
347                             encoding: ‘utf8‘
348                         })).contents);
349                     else
350                         next();
351                 }
352             }
353         });
354 
355         gulp.watch(‘./**/*‘).on("change", browserSync.reload);
356 
357     });
358 
359 
360     // ----- 任务 -----
361 
362     //默认任务
363     gulp.task(‘default‘, function() {
364         gulp.run(‘help‘);
365     });
366 
367     gulp.task(‘help‘, function() {
368         console.log(‘gulp build --env dev          ---测试环境模板打包‘);
369         console.log(‘gulp build --env pro          ---生产环境模板打包‘);
370         console.log(‘gulp debug                    ---本地调试‘);
371         console.log(‘gulp jstask                   ---js文件检查‘);
372         console.log(‘gulp jstask --file 文件名     ---检查js文件‘);
373         console.log(‘gulp csstask                  ---css文件检查‘);
374         console.log(‘gulp csstask --file 文件名    ---检查css文件‘);
375         console.log(‘gulp imagemin                 ---图片压缩‘);
376     });
377 
378     //项目完成提交任务
379     gulp.task(‘build‘, [‘clean-build‘], function(a) {
380         gulp.run(‘contenttask‘);
381         // gulp.run(‘imagemin‘);
382     });
383 
384     gulp.task(‘preview‘, [‘clean-preview‘], function(a) {
385         gulp.run(‘contenttask-preview‘);
386     });
387 
388     gulp.task(‘debug‘, [‘clean-preview‘], function(a) {
389         gulp.run(‘contenttask-watch‘);
390         gulp.run(‘webserver-static‘);
391         gulp.run(‘lessBuildAll‘);
392         gulp.run(‘lesstask‘);
393     });
394 
395     //项目完成提交任务
396     gulp.task(‘build-min‘, [‘clean‘], function() {
397         gulp.run(‘jstask-min‘);
398         gulp.run(‘csstask-min‘);
399         gulp.run(‘contenttask‘);
400         gulp.run(‘imagemin‘);
401     });