[NodeJS] Gulp with plugins 前端完整解決方案教學

Gulp基本安裝

1. 安裝NodeJS至目前OS上,將使用NodeJS的NPM管理套件(Command Line)

查看版本:node -v , npm -v

2. 先在全域(Global)安裝Gulp:

npm install -g gulp

Gulp.js on Github

3. 進入到專案資料夾,進行Package安裝(Dev Mode):

npm install gulp --save-dev

查看版本: gulp --version

4. 建立gulpfile.js於專案資料夾:

var gulp = require('gulp');

gulp.task('hello', function(){
    console.log('Hello Gulp.js');
});

使用指令 gulp hello 來確認Gulp是否正確執行hello任務


Plugins安裝

選用列表

Plugin Description
Gulp Webserver Web server
Gulp SASS SASS/SCSS 編譯器
Gulp FileIclude 如想使用Include方式可用,否則建議使用Gulp HTML Extend
Gulp HTML Extend Layout工具,可取代Gulp FileIclude
Gulp Debug Pipe Debug工具,用來識別檔案
Gulp Rename 重新命名檔名(For min file)
Gulp Clean CSS Minify CSS

整合TASKS

// Requirement
var gulp = require('gulp');
var webserver = require('gulp-webserver');
var sass = require('gulp-sass');
var fileinclude = require('gulp-file-include');

// Dist path
var distPath = './app';
var distAssetPath = distPath + '/assets';

// Combined task for Web Dev
gulp.task('default', [
    'webserver',
    'assets-deploy',
    'assets-deploy:watch',
    'sass',
    'sass:watch',
    'fileinclude',
    'fileinclude:watch',
]);

//  gulp-webserver
gulp.task('webserver', function() {
    gulp.src(distPath)
        .pipe(webserver({
            livereload: true,
            directoryListing: false,
            open: true
        }));
});

// Deploy Assets
var assetSource = './assets/**/*';
gulp.task('assets-deploy', function() {
    gulp.src([assetSource])
        .pipe(gulp.dest(distAssetPath));
});
gulp.task('assets-deploy:watch', function() {
    gulp.watch(assetSource, ['assets-deploy']);
});

// gulp-sass
var sassSource = './sass/**/*.scss';
var cssPath = distAssetPath + '/css';
gulp.task('sass', function() {
    return gulp.src(sassSource)
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(gulp.dest(cssPath));
});
gulp.task('sass:watch', function() {
    gulp.watch(sassSource, ['sass']);
});

// gulp-file-include
var viewPath = './views/**/*.html';
gulp.task('fileinclude', function() {
    gulp.src([viewPath])
        .pipe(debug())
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest(distPath));
});
gulp.task('fileinclude:watch', function() {
    gulp.watch(viewPath, ['fileinclude']);
});

Leave a Reply

Your email address will not be published. Required fields are marked *