使用Gulp實現前端構建自動化

使用Gulp實現前端構建自動化

安裝

一.安裝NodeJs

Gulp的安裝依賴於NodeJs的npm安裝管理器

安裝包下載地址

關於npm命令:

1. npm install <name>   
        會把插件安裝到node_modules目錄中
2. 參數 --save
        會在package.json的dependencies屬性下添加該插件
3. 參數 --save-dev:
        會在package.json的devDependencies屬性下添加添加該插件
4. 參數 -g
        全局安裝插件
4. npm install
    會安裝package.json下dependencies和 devDependencies聲明的插件
5. 使用原則:
    運行時須要用到的包使用--save，不然使用--save-dev。

二.安裝Gulp

1. 執行 npm init 初始化package.json ————便於共同開發時安裝插件
   
2. 執行 npm install -save gulp

三.Gulp的使用

1.在項目根目錄下建立一個gulpfile.js文件

2.在gulpfile.js文件下引入gulp

var gulp = require('gulp');

3.建立默認任務

//執行 gulp 會默認執行該任務
gulp.task('default', function() {
    
});

4.文件移動指令

//目標文件
gulp.task('movecss', function() {
    gulp.src('*.css')//指定源文件
    .pipe(
        gulp.dest('minicss')//輸出到指定的目錄 若該目錄不存在會自動建立
    );
});

5.監聽文件變化執行一些操做

//目標文件
gulp.task('watchjs', function() {
    gulp.watch('main.js', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
    });
});

6.在一個task下引用其餘task

//多個task
gulp.task('tasks', ['movecss','watchjs'], function() {
    console.log('last task');
});

//會按順序執行
gulp.task('default', ['movecss', 'watchjs']);

四.經常使用插件

1.壓縮CSS---gulp-minify-css

安裝:

npm install gulp-minify-css --save-dev

用法:

//引入gulp-minify-css
var cssminify = require('gulp-minify-css');
//壓縮css 並移動到指定的文件夾
gulp.task('cssmin', function () {
    gulp.src('*.css')
        .pipe(cssminify())
        .pipe(gulp.dest('minicss'));
});

2.壓縮js---gulp-minify

安裝:

npm install --save-dev gulp-minify

用法:

//壓縮js
gulp.task('compress', function () {
    gulp.src('*.js')
        .pipe(minify({
            ext:{
                src:'-debug.js',//源文件的擴展名
                min:'-min.js'   //壓縮過的文件的擴展名
            },
            exclude: ['folder'], //排除的目錄
            ignoreFiles: ['gulpfile.js'] //不壓縮的文件
        }))
        .pipe(gulp.dest('minijs'))
});

3.gulp-clean

安裝:

npm install --save-dev gulp-clean

用法:

//清除文件
gulp.task('clean-mini-js', function () {
    return gulp.src('minijs', {read: false})
        .pipe(clean());
});

其餘經常使用插件

• gulp-manifest
• run-sequence
• gulp-exec
• gulp-css-urls
• gulp-minify-css
• gulp-htmlmin
• gulp-imagemin
• gulp-uglify
• gulp-concat
• gulp-rename

Github--本文代碼

參考連接:

加速npm install 方法

Gulp中文網

npm 安裝相關知識

gulp-minify-css

gulp-minify

gulp-clean