gulp创建任务模板（less/压缩/合并/最小化图片）

操作流程

• 首先通过 gulp.src() 方法获取到想要处理的文件流
• 然后把文件流通过 pipe 方法导入到 gulp 的插件中
• 最后把经过插件处理后的流再通过pipe方法导入到 gulp.dest() 方法中
• gulp.dest() 方法则把流中的内容写入到文件中

**package.json**{  "name": "code",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "",  "license": "ISC",  "devDependencies": {    "browser-sync": "^2.11.1",    "gulp": "^3.9.0",    "gulp-cssnano": "^2.1.0",    "gulp-less": "^3.0.5"  }}

**gulpfile.js**'use strict';// 此处代码都是由NODE执行// 载入Gulp模块var gulp = require('gulp');var less = require('gulp-less');// 注册一个任务gulp.task('copy', function() {  // 当gulp执行这个say任务时会自动执行该函数  // console.log('hello world');  // 合并 压缩之类的操作  // 复制文件  // gulo.src取一个文件  gulp.src('src/index.html')    .pipe(gulp.dest('dist/')); // 将此处需要的操作传递进去});gulp.task('dist', function() {  // src/index.html  gulp.watch('src/index.html', ['copy']);  gulp.watch('src/styles/*.less', ['style']);});var cssnano = require('gulp-cssnano');gulp.task('style', function() {  gulp.src('src/styles/*.less')    .pipe(less()) // 该环节过后就是CSS    .pipe(cssnano())    .pipe(gulp.dest('dist/css/'));});var browserSync = require('browser-sync').create();// Static servergulp.task('serve', function() {    browserSync.init({        server: {            baseDir: "./"        }    });});

常用插件

• 编译 Less：gulp-less
• 创建本地服务器：gulp-connect
• 合并文件：gulp-concat
• 最小化 js 文件：gulp-uglify
• 重命名文件：gulp-rename
• 最小化 css 文件：gulp-minify-css
• 压缩html文件 gulp-minify-html
• 最小化图像：gulp-imagemin