gulp建構工作流

gulp建構工作流以及gulpfile.js檔案

### 步驟：
1. 指令行建立npm的配置檔案
    a. npm init（這時候生成一個package.json的檔案）
2. 添加一個gulp的依賴
    npm install gulp --save-dev 
3. 在項目根目錄下添加一個gulpfile.js檔案，這個是gulp的主檔案，這個檔案名是固定的

4. 在gulpfile中抽象我們需要做的任務
    需要做的任務有：1. LESS編譯 壓縮 合并
                    2. JS合并 壓縮 混淆
                    3. img複制
                    4. html壓縮
    這個時候要在src中寫源檔案，寫完之後要将這些源檔案釋出到dist目錄中
5. 添加less的編譯需要插件，是以要在根目錄下安裝
    npm install gulp-less gulp-concat gulp-uglify gulp-cssnano gulp-htmlmin --save-dev
    （其中包括的功能有less編譯，壓縮合并，js合并壓縮混淆，img複制）
    包下載下傳好之後要将包導入
6.  啟用自動化同步伺服器的功能
    npm install browser-sync --save-dev 
7.完整的gulpfile.js檔案代碼

        'use strict';
        /**
         * 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')) //這裡不用寫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']);
        });
           

轉載于:https://www.cnblogs.com/ccvtt/p/8554975.html