gulp入门与一些基本设置

1.安装Nodejs

下载nodejs安装，这里免了

2.安装全局gulp

npm install --global gulp-cli

3.进入项目目录（之后的操作全是在此目录下进行）

cd myprogram

4.初始化package.json

npm init

5.安装项目gulp

npm install --save-dev gulp

6.安装插件

npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-jshint jshint gulp-uglify gulp-notify gulp-useref gulp-load-plugins gulp-clean-css gulp-sass gulp-if gulp-users gulp-rev gulp-rev-collector —save-dev 

7.新建gulpfile.js

var gulp = require('gulp');      gulp.task('default', function() {          // place code for your default task here      });  

8.测试

在终端输入命令

gulp

9.package.json

"devDependencies": {    "del": "^2.2.0",    "gulp": "^3.9.1",    "gulp-clean-css": "^2.0.8",    "gulp-concat": "^2.6.0",    "gulp-htmlmin": "^2.0.0",    "gulp-if": "^2.0.1",    "gulp-imagemin": "^3.0.1",    "gulp-jshint": "^2.0.1",    "gulp-load-plugins": "^1.2.4",    "gulp-notify": "^2.2.0",    "gulp-rev": "^7.0.0",    "gulp-rev-collector": "^1.0.3",    "gulp-sass": "^2.3.1",    "gulp-sequence": "^0.4.5",    "gulp-uglify": "^1.5.3",    "gulp-useref": "^3.1.0",    "imagemin-pngcrush": "^5.0.0",    "jshint": "^2.9.2"  }

10.gulpfile.js

'use strict';var gulp = require('gulp'),    $ = require("gulp-load-plugins")(),    sass = require("gulp-sass"),    rev = require("gulp-rev"),    del = require('del');gulp.task('default', function() {  gulp.run('styles', 'jshint');  gulp.watch('src/styles/*.scss', ['styles']);});gulp.task('build', $.sequence('cpfiles', 'useref', 'cphtml', 'revfile',          'revhtml', 'delfiles', 'img','htmlmin'));gulp.task('htmlmin', function() {  return gulp.src(['dist/*/*.html', 'dist/*.html'])    .pipe($.htmlmin({collapseWhitespace: true}))    .pipe(gulp.dest('dist/'))    .pipe($.notify({ message: 'htmlmin task done' }));});gulp.task('delfiles', function(){  del([    'dist/js',    'dist/css',    'dist/styles',    'dist/lib/index.html',    'dist/lib/rev-manifest.json'  ]);})gulp.task('revhtml', function () {  return gulp.src(['dist/lib/rev-manifest.json', 'dist/lib/index.html'])    .pipe($.revCollector())    .pipe(gulp.dest('dist/'))    .pipe($.notify({ message: 'revhtml task done' }));});gulp.task('revfile', function(){  return gulp.src(['dist/lib/*.css', 'dist/lib/*.js'])    .pipe($.rev())    .pipe(gulp.dest('dist/lib/'))    .pipe(rev.manifest({      path: 'rev-manifest.json',      merge: true    }))    .pipe(gulp.dest("dist/lib/"))    .pipe($.notify({ message: 'revfile task done' }));});gulp.task('cphtml', function(){  return gulp.src('dist/*.html')    .pipe(gulp.dest('dist/lib/'))    .pipe($.notify({ message: 'copyhtml task done' }));})gulp.task('useref', function() {  return gulp.src('dist/*.html')    .pipe($.useref())    .pipe($.if('*.js', $.uglify()))    .pipe($.if('*.css', $.cleanCss({compatibility: 'ie8'})))    .pipe(gulp.dest('dist/'))    .pipe($.notify({ message: 'useref task done' }));});gulp.task('cpfiles', ['styles'], function(){  return gulp.src(['src/*/*','src/*'])    .pipe(gulp.dest('dist/'))    .pipe($.notify({ message: 'copyfiles task done' }));})gulp.task('img', function() {  return gulp.src('dist/images/*.*')    .pipe($.imagemin({        progressive: true,        svgoPlugins: [{removeViewBox: false}],        use: [$.imagemin()]    }))    .pipe(gulp.dest('dist/images/'))    .pipe($.notify({ message: 'img task done' }));});gulp.task('styles', function(){  return gulp.src('src/styles/*.scss')    .pipe(sass().on('error', sass.logError))    .pipe(gulp.dest('src/css'))    .pipe($.notify({ message: 'sass task done' }));})gulp.task('jshint', function() {  return gulp.src(['src/js/main.js','src/js/route.js'])    .pipe($.jshint())    .pipe($.jshint.reporter('default'))    .pipe($.notify({ message: 'jshint task done' }));});gulp.task('clean', function(){  del([    'dist/'    ]);})