【gulp入門】，將我踩過的坑告訴你

1.安裝node.js

官網下載http://nodejs.cn/ next next and next..

2.npm

最近npm出了個事件，可能藥丸..

-g：全局安裝。將會安裝在C:\Users\Administrator\AppData\Roaming\npm，而且寫入系統環境變量；  非全局安裝：將會安裝在當前定位目錄；  全局安裝能夠經過命令行在任何地方調用它，本地安裝將安裝在定位目錄的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必備的文件

  1 /**
  2  * 組件安裝
  3  * 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
  4  */
  5 
  6 // 引入 gulp及組件
  7 var gulp    = require('gulp'),                 //基礎庫
  8     imagemin = require('gulp-imagemin'),       //圖片壓縮
  9     pngcrush = require('imagemin-pngcrush'),
 10     notify = require('gulp-notify');           //提示信息
 11     sass = require('gulp-ruby-sass'),          //sass
 12     minifycss = require('gulp-minify-css'),    //css壓縮
 13     jshint = require('gulp-jshint'),           //js檢查
 14     uglify  = require('gulp-uglify'),          //js壓縮
 15     rename = require('gulp-rename'),           //重命名
 16     concat  = require('gulp-concat'),          //合併文件
 17     clean = require('gulp-clean'),             //清空文件夾
 18     tinylr = require('tiny-lr'),               //livereload
 19     server = tinylr(),
 20     port = 35729,
 21     livereload = require('gulp-livereload');   //livereload
 22 
 23 // HTML處理
 24 gulp.task('html', function() {
 25     var htmlSrc = './src/*.html',
 26         htmlDst = './dist/';
 27 
 28     gulp.src(htmlSrc)
 29         .pipe(livereload(server))
 30         .pipe(gulp.dest(htmlDst))
 31 });
 32 
 33 // 樣式處理
 34 gulp.task('css', function () {
 35     var cssSrc = './src/css/*.css',
 36         cssDst = './dist/css';
 37 
 38     gulp.src(cssSrc)
 39         // .pipe(sass({ style: 'expanded'}))
 40         .pipe(gulp.dest(cssDst))
 41         .pipe(rename({ suffix: '.min' }))
 42         .pipe(minifycss())
 43         .pipe(livereload(server))
 44         .pipe(gulp.dest(cssDst));
 45 });
 46 
 47 // 圖片處理
 48 gulp.task('images', function() {
 49   return gulp.src('src/images/*')
 50     .pipe(imagemin({
 51         progressive: true,
 52         svgoPlugins: [{removeViewBox: false}],
 53         use: [pngcrush()]
 54     }))
 55     .pipe(gulp.dest('./dist/images/'))
 56     .pipe(notify({ message: 'img task ok' }));
 57 });
 58 
 59 // js處理
 60 gulp.task('js', function () {
 61     var jsSrc = './src/js/*.js',
 62         jsDst ='./dist/js';
 63 
 64     gulp.src(jsSrc)
 65         // .pipe(jshint('.jshintrc'))
 66         // .pipe(jshint.reporter('default'))
 67         .pipe(concat('main.js'))
 68         .pipe(gulp.dest(jsDst))
 69         .pipe(rename({ suffix: '.min' }))
 70         .pipe(uglify())
 71         .pipe(livereload(server))
 72         .pipe(gulp.dest(jsDst));
 73 });
 74 
 75 // 清空圖片、樣式、js
 76 gulp.task('clean', function() {
 77     gulp.src(['./dist/css', './dist/js', './dist/images'], {read: false})
 78         .pipe(clean());
 79 });
 80 
 81 // 默認任務 清空圖片、樣式、js並重建 運行語句 gulp
 82 gulp.task('default', ['clean'], function(){
 83     gulp.start('html','css','images','js');
 84 });
 85 
 86 // 監放任務 運行語句 gulp watch
 87 gulp.task('watch',function(){
 88 
 89     server.listen(port, function(err){
 90         if (err) {
 91             return console.log(err);
 92         }
 93 
 94         // 監聽html
 95         gulp.watch('./src/*.html', function(event){
 96             gulp.run('html');
 97         })
 98 
 99         // 監聽css
100         gulp.watch('./src/scss/*.scss', function(){
101             gulp.run('css');
102         });
103 
104         // 監聽images
105         gulp.watch('./src/images/**/*', function(){
106             gulp.run('images');
107         });
108 
109         // 監聽js
110         gulp.watch('./src/js/*.js', function(){
111             gulp.run('js');
112         });
113 
114     });
115 });

View Code

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壓縮圖片沒有反應，不造什麼緣由，知道的能夠再評論說下，持續更新中..