【gulp入门】，将我踩过的坑告诉你

1.安装node.js

官网下载http://nodejs.cn/ next next and next..

2.npm

最近npm出了个事件，可能药丸..

-g：全局安装。将会安装在C:UsersAdministratorAppDataRoaming pm，并且写入系统环境变量；  非全局安装：将会安装在当前定位目录；  全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；

--save：将保存配置信息至package.json（package.json）；

-dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；

3.推荐安装cnpm

用法和npm一样,将用法

npm install gulp --save-dev

改为了

cnpm install gulp --save-dev

安装方法

npm install cnpm -g --registry=https://registry.npm.taobao.org

 注意：安装完后最好查看其版本号cnpm -v或关闭命令提示符重写打开，安装完直接使用有可能会出现错误

4.安装全局gulp

cnpm install gulp -g　

5.准备工作已经做完了，下面开始第一步，package.json，放在根目录下

（1）可以使用cnpm init

(2)直接复制这段代码

{
  "name": "gulp-master",
  "version": "1.0.0",
  "description": "gulp",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [
    "gulp"
  ],
  "author": "sun",
  "license": "ISC"
}

6.安装本地gulp

cnpm install gulp --save-dev

7.安装gulp插件

cnpm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev

安装的这些插件会在gulpfile.js介绍

8.写gulpfile.js

这是运行gulp必备的文件

/**
 * 组件安装
 * cnpm install gulp-util gulp-imagemin gulp-ruby-sass gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev
 */

// 引入 gulp及组件
var gulp    = require('gulp'),                 //基础库
    imagemin = require('gulp-imagemin'),       //图片压缩
    pngcrush = require('imagemin-pngcrush'),
    notify = require('gulp-notify');           //提示信息
    sass = require('gulp-ruby-sass'),          //sass
    minifycss = require('gulp-minify-css'),    //css压缩
    jshint = require('gulp-jshint'),           //js检查
    uglify  = require('gulp-uglify'),          //js压缩
    rename = require('gulp-rename'),           //重命名
    concat  = require('gulp-concat'),          //合并文件
    clean = require('gulp-clean'),             //清空文件夹
    tinylr = require('tiny-lr'),               //livereload
    server = tinylr(),
    port = 35729,
    livereload = require('gulp-livereload');   //livereload

// HTML处理
gulp.task('html', function() {
    var htmlSrc = './src/*.html',
        htmlDst = './dist/';

    gulp.src(htmlSrc)
        .pipe(livereload(server))
        .pipe(gulp.dest(htmlDst))
});

// 样式处理
gulp.task('css', function () {
    var cssSrc = './src/css/*.css',
        cssDst = './dist/css';

    gulp.src(cssSrc)
        // .pipe(sass({ style: 'expanded'}))
        .pipe(gulp.dest(cssDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
        .pipe(livereload(server))
        .pipe(gulp.dest(cssDst));
});

// 图片处理
gulp.task('images', function() {
  return gulp.src('src/images/*')
    .pipe(imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    }))
    .pipe(gulp.dest('./dist/images/'))
    .pipe(notify({ message: 'img task ok' }));
});

// js处理
gulp.task('js', function () {
    var jsSrc = './src/js/*.js',
        jsDst ='./dist/js';

    gulp.src(jsSrc)
        // .pipe(jshint('.jshintrc'))
        // .pipe(jshint.reporter('default'))
        .pipe(concat('main.js'))
        .pipe(gulp.dest(jsDst))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(livereload(server))
        .pipe(gulp.dest(jsDst));
});

// 清空图片、样式、js
gulp.task('clean', function() {
    gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
        .pipe(clean());
});

// 默认任务 清空图片、样式、js并重建 运行语句 gulp
gulp.task('default', ['clean'], function(){
    gulp.start('html','css','images','js');
});

// 监听任务 运行语句 gulp watch
gulp.task('watch',function(){

    server.listen(port, function(err){
        if (err) {
            return console.log(err);
        }

        // 监听html
        gulp.watch('./src/*.html', function(event){
            gulp.run('html');
        })

        // 监听css
        gulp.watch('./src/scss/*.scss', function(){
            gulp.run('css');
        });

        // 监听images
        gulp.watch('./src/images/**/*', function(){
            gulp.run('images');
        });

        // 监听js
        gulp.watch('./src/js/*.js', function(){
            gulp.run('js');
        });

    });
});

9.说下遇到的一些问题

1.运行js task的时候，会提示没有.jshintrc文件

只需将.jshintrc添加到根目录即可

{
    "curly": true, // true: Require {} for every new block or scope
    "eqeqeq": true, // true: Require triple equals (===) for comparison
    "immed": true, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
    "latedef": true, // true: Require variables/functions to be defined before being used
    "newcap": true, // true: Require capitalization of all constructor functions e.g. `new F()`
    "noarg": true, // true: Prohibit use of `arguments.caller` and `arguments.callee`
    "sub": true, // true: Prohibit use of empty blocks
    "undef": true, // true: Require all non-global variables to be declared (prevents global leaks)
    "boss": true, // true: Require all defined variables be used
    "eqnull": true, // true: Requires all functions run in ES5 Strict Mode
    "es3": true, // {int} Max number of formal params allowed per function
    "node": true, // {int} Max depth of nested blocks (within functions)
    "-W117": true // {int} Max number statements per function
}

2.运行gulp 的task任务会提示缺少xxmodule，添加该module即可

cnpm install xxxx --save-dev

3.用gulp-imagemin压缩图片没有反应，不造什么原因，知道的可以再评论说下，持续更新中..