gulpfile 编译运行_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'://g})))162 .pipe(gulpif(options.env === 'pro', template(config.pro_template,{'interpolate'://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 .site'], {169 templateData: {170 siteId: config.testSiteId171 }172 })))173 .pipe(gulpif(options.env === 'pro', shell(['touch .site'], {174 templateData: {175 siteId: config.proSiteId176 }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 returncombined;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 returncombined;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 returncombined;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 });