前端練習項目gulp配置

記錄下學習過程使用gulp的一些經驗

---

個人文件夾目錄是這樣的

|-- project
    |-- child-project
        |-- src
            |-- html
            |-- less
            |-- js
            |-- img
        |-- dist
            |-- html
            |-- css
            |-- js
            |-- img

功能需求以下

• 在 project任意子目錄下修改less文件後自動編譯在對應項目文件夾的css文件夾下
• 在 project任意子目錄下修改html、js、less文件後都自動刷新瀏覽器

2017-12-14

• 增長了壓縮文件的需求，須要將src中的js文件/img/css文件進行壓縮，壓縮至dist文件夾下
• 增長了檢查js代碼

實際配置

//編譯與刷新瀏覽器
    //導入工具包
var gulp = require('gulp'),
    less = require('gulp-less'),
    browserSync = require('browser-sync').create(),
    browserReload = browserSync.reload,
    rename = require('gulp-rename');

//定義less編譯任務
gulp.task('lessCompile', function() {
    gulp.src('./project/**/*.less') //該任務針對的文件
        .pipe(less())//該任務調用的模塊
        .pipe(rename(function(path) {
            return path.dirname = path.dirname.replace('less', 'css');
        }))
        .pipe(gulp.dest('./project'))
        .pipe(browserReload({stream: true}));
});

//監聽 本地 less/html/js 文件
gulp.task('serve', function(){
    //監聽本地文件
    browserSync.init({
        server: {
            baseDir: "./project",
            directory: true
        }
    });
    //監聽less
    gulp.watch("./project/**/*.less", ['lessCompile']);
    //監聽html
    gulp.watch("./project/**/*.html").on('change', browserReload);
    //監聽js
    gulp.watch("./project/**/*.js").on('change', browserReload);
    
}); 

//定義默認任務
gulp.task('default', ['serve']);

---

//代碼檢查和壓縮
gulp.task('jsHint', function() {
    gulp.src(['./project/**/*.js', '!./project/**/dist/**/*.js'])//檢查的文件，忽略dist中的js文件
        .pipe(jshint(jshintConfig))//檢查
        .pipe(jshint.reporter('default')); // 輸出檢查結果
});
//定義js壓縮任務（css與img同此，更換插件便可）
gulp.task('jsmin', function() {
    gulp.src(['./project/**/*.js', '!./project/**/dist/**/*.js'])//壓縮的文件，忽略dist中的js文件
        .pipe(uglify())//壓縮
        //.pipe(rename({suffix:'.min'}))//增長min後綴
        .pipe(rename(function(path) {
            return path.dirname = path.dirname.replace('src', 'dist');
        }))//壓縮至dist文件夾
        .pipe(gulp.dest('./project'));
});

參考學習

http://www.cnblogs.com/2050/p...，src與dest的路徑學習參考此文
http://www.ydcss.com/archives/18 gulp的詳細入門指南
http://blog.csdn.net/u0137205... jshint的參數的配置