node和gulp实现前端工程自动化(附：gulp常用插件)

/** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */

// 在gulpfile中先载入gulp包，因为这个包提供了一些API var gulp = require('gulp'); var less = require('gulp-less'); var cssnano = require('gulp-cssnano');

// 1. LESS编译 压缩 --合并没有必要，一般预处理CSS都可以导包 gulp.task('style', function() { // 这里是在执行style任务时自动执行的 gulp.src(['src/styles/*.less', '!src/styles/_*.less']) .pipe(less()) .pipe(cssnano()) .pipe(gulp.dest('dist/styles')) .pipe(browserSync.reload({ stream: true })); });

var concat = require('gulp-concat'); var uglify = require('gulp-uglify');

// 2. JS合并 压缩混淆 gulp.task('script', function() { gulp.src('src/scripts/*.js') .pipe(concat('all.js')) .pipe(uglify()) .pipe(gulp.dest('dist/scripts')) .pipe(browserSync.reload({ stream: true })); });

// 3. 图片复制 gulp.task('image', function() { gulp.src('src/images/*.*') .pipe(gulp.dest('dist/images')) .pipe(browserSync.reload({ stream: true })); });

var htmlmin = require('gulp-htmlmin'); // 4. HTML gulp.task('html', function() { gulp.src('src/*.html') .pipe(htmlmin({ collapseWhitespace: true, removeComments: true })) .pipe(gulp.dest('dist')) .pipe(browserSync.reload({ stream: true })); });

var browserSync = require('browser-sync'); gulp.task('serve', function() { browserSync({ server: { baseDir: ['dist'] }, }, function(err, bs) { console.log(bs.options.getIn(["urls", "local"])); });

gulp.watch('src/styles/*.less',['style']); gulp.watch('src/scripts/*.js',['script']); gulp.watch('src/images/*.*',['image']); gulp.watch('src/*.html',['html']); });

附录：

gulp常用插件：

gulp-less：编译less gulp-concat：合并代码 gulp-uglify：压缩js文件 gulp-rename：重命名文件 gulp-cssnano：css压缩 gulp-htmlmin：压缩html gulp-imagemin：压缩图像 brower-sync:用来代替创建服务器 gulp-connect：创建本地服务器