gulp/grunt 安裝/案例實戰實戰 JavaScript建構（編繹）系統大比拼：Grunt vs. Gulp

安裝nodejs

參考材料

http://www.gruntjs.net/docs/getting-started/

1.安裝grunt-cli

npm install -g grunt-cli

2.到項目目錄初始化檔案

npm init

3.安裝grunt : npm install <model> --save-dev

npm install grunt --save-dev

//grunt-contrib-jshint 是一個代碼檢查工具

npm install grunt-contrib-jshint --save-dev

npm install grunt-contrib-nodeunit --save-dev

//grunt-contrib-uglify 是代碼壓縮工具 js

npm install grunt-contrib-uglify --save-dev

//css 壓縮

npm install grunt-css --save-dev

npm install grunt-contrib-concat --save-dev

npm install grunt-contrib-watch --save-dev

npm install grunt-contrib-qunit --save-dev

npm install grunt-contrib-clean --save-dev

css預編譯

需要安轉ruby sass 運作環境

http://www.w3cplus.com/sassguide/install.html

https://www.npmjs.com/package/grunt-contrib-sass

npm install grunt-contrib-sass --save-dev

https://www.npmjs.com/package/grunt-contrib-less

npm install grunt-contrib-less --save-dev

其他插件

npm install grunt-contrib-requirejs --save-dev

npm install grunt-contrib-imagemin --save-dev

npm install grunt-contrib-htmlmin --save-dev

npm install grunt-contrib-jasmine --save-dev

npm install grunt-template-jasmine-requirejs --save-dev

4.安裝grunt-html2js angular templates

//https://www.npmjs.com/package/grunt-html2js

npm install grunt-html2js --save-dev

//grunt.loadNpmTasks('grunt-html2js');

gulp 安裝

http://www.open-open.com/lib/view/open1417068223049.html#_label1

npm install -g gulp

npm install --save del

npm install gulp --save-dev

插件npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache --save-dev

npm install gulp-ruby-sass --save-dev

npm install gulp-autoprefixer --save-dev

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

npm install gulp-jshint --save-dev

npm install gulp-concat --save-dev

npm install gulp-uglify --save-dev

npm install gulp-imagemin --save-dev

npm install gulp-clean --save-dev

npm install gulp-notify --save-dev

npm install gulp-rename --save-dev

npm install gulp-livereload --save-dev

npm install gulp-cache --save-dev

npm install --save-dev gulp-ng-html2js

npm install --save-dev gulp-minify-html

你僅僅需要知道的5個gulp指令

gulp.task(name, fn)這個你應經見過了

gulp.run(tasks...)盡可能多的并行運作多個task

gulp.watch(glob, fn)當glob内容發生改變時，執行fn

gulp.src(glob)傳回一個可讀的stream

gulp.dest(glob)傳回一個可寫的stream

============================================================華麗分割線============================================================

grunt 案例配置實戰

package.json

{
  "name": "mlmapp",
  "version": "1.1.0",
  "description": "mlmapp project",
  "main": "",
  "scripts": {
    "mlmapp": "grunt"
  },
  "config": {
    "basePath": "",
    "srcSassPath": "sass",
    "srcTplPath": "tpl",
    "srcJsPath": "js",
    "srcCssPath": "css",
    "deployPath": "assets"
  },
  "author": "mlm",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-jshint": "^0.11.1",
    "grunt-contrib-less": "^1.0.0",
    "grunt-contrib-nodeunit": "^0.4.1",
    "grunt-contrib-qunit": "^0.5.2",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-uglify": "^0.8.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-css": "^0.5.4",
    "grunt-html": "^4.0.2",
    "grunt-html2js": "^0.3.0"
  }
}

gruntfile.js 執行内容 sass解析，壓縮js/css 監聽事件等

//依賴nodejs ruby grunt-cil
/**
 * 1.安裝nodejs
 * 2.安裝grunt http://www.gruntjs.net/docs/getting-started/
 * 2.1安裝grunt-cli 
 * 指令npm install -g grunt-cli
 * 3.安裝ruby 
 * 4.安裝sass http://www.w3cplus.com/sassguide/install.html
 */
module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        banner: '/** \n' +
                ' * <%= pkg.name %> - v<%= pkg.version %> - <%= grunt.template.today("yyyy-mm-dd") %>\n' +
                ' * \n' +
                ' * \n' +
                ' * Copyright (c) <%= grunt.template.today("yyyy") %>\n' +
//                ' * Licensed MIT <>\n'+
                ' */',
        //angular模闆 整合成js檔案
        html2js: {
            options: {
                process: true,
                htmlmin: {
                    collapseBooleanAttributes: true,
                    collapseWhitespace: true,
                    removeAttributeQuotes: true,
                    removeComments: true,
                    removeEmptyAttributes: true,
                    removeRedundantAttributes: true,
                    removeScriptTypeAttributes: true,
                    removeStyleLinkTypeAttributes: true
                },
//                module : 'templateStore',
                base: "tpl"
            },
            //templates-app angular model
            app: {
                src: ['<%= pkg.config.srcTplPath %>/**/*.tpl.html'],
                dest: '<%= pkg.config.srcJsPath %>/<%= pkg.name %>-tpls.js'
            },
        },
        //檔案合并
        concat: {
            options: {
                // 定義一個用于插入合并輸出檔案之間的字元
                separator: ';'
            },
            js: {//合并js目錄所有檔案
                src: '<%= pkg.config.srcJsPath %>/**/*.js',
                dest: '<%= pkg.config.deployPath %>/<%= pkg.name %>.js'
            },
            css: {//合并css目錄所有檔案
                src: '<%= pkg.config.srcCssPath %>/**/*.css',
                dest: '<%= pkg.config.deployPath %>/<%= pkg.name %>.css'
            }
        },
        //js 壓縮
        uglify: {
            options: {
                banner: '<%=banner%>'
            },
            minjs: {
                options: {
//                    mangle: false,
//                    beautify: true, //格式化
//                    wrap: 'angular',
                    enclose:{},
//                    exportAll: true
                },
                files: [{
                        src: '<%= pkg.config.deployPath %>/<%= pkg.name %>.js',
                        dest: '<%= pkg.config.deployPath %>/<%= pkg.name %>-<%= pkg.version %>.js'
                    }]
            }
        },
        //css 壓縮
        cssmin: {//css檔案壓縮  
            options: {
                banner: '<%=banner%>'
            },
            css: {
                src: '<%= pkg.config.deployPath %>/<%= pkg.name %>.css', //将之前的all.css  
                dest: '<%= pkg.config.deployPath %>/<%= pkg.name %>-<%= pkg.version %>.css'  //壓縮  
            }
        },
        //監視檔案狀态執行指定任務
        watch: {
            //sass 監聽
//            tpl: {//合并js目錄所有檔案
//                files: [
//                    '<%= pkg.config.srcTplPath %>/**/*.tpl.html'
//                ],
//                tasks: ['minjs']
//            },
            sass: {
                files: [
                    '<%= pkg.config.srcSassPath %>/**/*.scss'
                ],
                tasks: ['mincss']
            },
            js: {
                files: [
                    '<%= pkg.config.srcTplPath %>/**/*.tpl.html',
                    '<%= pkg.config.srcJsPath %>/**/*.js'
                ],
                tasks: ['minjs']
            }
        },
        //sass處理
        sass: {
            //釋出
            appmin: {
                options: {// Target options 
                    style: 'compressed', //nested, compact, compressed, expanded. 
                    sourcemap: 'none'
                },
                files: {
                    '<%= pkg.config.srcCssPath %>/base.min.css': '<%= pkg.config.srcSassPath %>/base.scss',
                    '<%= pkg.config.srcCssPath %>/app.min.css': '<%= pkg.config.srcSassPath %>/app.scss'
                }
            },
            //開發
            app: {
                options: {// Target options 
                    style: 'nested',
                    sourcemap: 'none'
                },
                files: {
                    '<%= pkg.config.srcCssPath %>/base.css': '<%= pkg.config.srcSassPath %>/base.scss',
                    '<%= pkg.config.srcCssPath %>/app.css': '<%= pkg.config.srcSassPath %>/app.scss'
                }
            }
        },
        clean: {
            js: ["<%= pkg.config.deployPath %>/*.js", "!<%= pkg.config.deployPath %>/*-<%= pkg.version %>.js"],
            css: ["<%= pkg.config.deployPath %>/*.css", "!<%= pkg.config.deployPath %>/*-<%= pkg.version %>.css"],
            tpl: ["<%= pkg.config.srcJsPath %>/<%= pkg.name %>-tpls.js"]
        }
    });
    //加載 Grunt 插件和任務
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-css');
    grunt.loadNpmTasks('grunt-html2js');
//    注冊任務
    grunt.registerTask('css', ['sass:app']); //sass to css
    grunt.registerTask('watchcss', ['watch:sass']); //監聽sass檔案修改自動更新
    grunt.registerTask('watchjs', ['watch:js']); //監聽js檔案修改自動更新
    grunt.registerTask('tpl', ['html2js']); //模闆合并為js
    grunt.registerTask('js', ['tpl', 'concat:js']); //js 合并
    grunt.registerTask('mincss', ['css', 'concat:css', 'cssmin']); //css壓縮
    grunt.registerTask('minjs', ['js', 'uglify']); //js壓縮
    grunt.registerTask('min', ['mincss', 'minjs']); //壓縮
    grunt.registerTask('default', ['min']);
};

gulp案例實戰

package.json

{
  "name": "mlmapp",
  "version": "1.1.0",
  "description": "mlmapp project",
  "main": "index.js",
  "scripts": {
    "test": "glup"
  },
  "config": {
    "basePath": "",
    "srcSassPath": "Public/sass",
    "srcImgPath": "Public/img",
    "srcTplPath": "Public/tpl",
    "srcJsPath": "Public/js",
    "srcCssPath": "Public/css",
    "deployPath": "Public/assets"
  },
  "author": "mlm",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-autoprefixer": "^2.1.0",
    "gulp-cache": "^0.2.8",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.5.2",
    "gulp-imagemin": "^2.2.1",
    "gulp-jshint": "^1.9.4",
    "gulp-livereload": "^3.8.0",
    "gulp-minify-css": "^1.0.0",
    "gulp-minify-html": "^1.0.1",
    "gulp-ng-html2js": "^0.2.0",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.0",
    "gulp-ruby-sass": "^1.0.1",
    "gulp-uglify": "^1.1.0"
  },
  "dependencies": {
    "del": "^1.1.1"
  }
}

gulpfile.js 執行内容與grunt 相同

var gulp = require('gulp'),
        sass = require('gulp-ruby-sass'),
        autoprefixer = require('gulp-autoprefixer'),
        minifycss = require('gulp-minify-css'),
        jshint = require('gulp-jshint'),
        uglify = require('gulp-uglify'),
        imagemin = require('gulp-imagemin'),
        rename = require('gulp-rename'),
        clean = require('gulp-clean'),
        concat = require('gulp-concat'),
        notify = require('gulp-notify'),
        cache = require('gulp-cache'),
        livereload = require('gulp-livereload'),
        del = require('del'),
        pkg = require('./package.json'),
        ngHtml2Js = require("gulp-ng-html2js"),
        minifyHtml = require("gulp-minify-html");
//console.info(pkg);
/*
 * "config": {
 "basePath": "",
 "srcSassPath": "Public/sass",
 "srcTplPath": "Public/tpl",
 "srcJsPath": "Public/js",
 "srcCssPath": "Public/css",
 "deployPath": "Public/assets"
 }
 */

//angular 模闆
gulp.task('ngTpl', function () {
    return gulp.src(pkg.config.srcTplPath + "/**/*.tpl.html")
            .pipe(minifyHtml({
                empty: true,
                spare: true,
                quotes: true
            }))
            .pipe(ngHtml2Js({
                moduleName: "templates-app",
//                declareModule: false,
                stripPrefix: pkg.config.srcTplPath,
//                prefix: pkg.config.srcTplPath
            }))
            .pipe(concat(pkg.name + "-tpls.js"))
            .pipe(uglify())
            .pipe(gulp.dest(pkg.config.srcJsPath))
            .pipe(notify({message: 'ngTpl task complete'}));
});

//合并
gulp.task('minjs', ['cleanjs', 'ngTpl'], function () {
    return gulp.src(pkg.config.srcJsPath + '/**/*.js')
            .pipe(concat(pkg.name + ".js"))
            .pipe(gulp.dest(pkg.config.deployPath))
            .pipe(rename(pkg.name + "-" + pkg.version + ".js"))
            .pipe(uglify())
            .pipe(gulp.dest(pkg.config.deployPath))
            .pipe(notify({message: 'minjs task complete'}));
});
//解析sass
gulp.task('sass', function () {
    return sass([pkg.config.srcSassPath + '/app.scss'], {style: 'expanded'})
            .pipe(gulp.dest(pkg.config.srcCssPath))
            .pipe(notify({message: '解析sass task complete'}));
});
//合并css
gulp.task('mincss', ['cleancss', 'sass'], function () {
    return gulp.src([pkg.config.srcCssPath + '/*.css'])
            .pipe(concat(pkg.name + ".css"))
            .pipe(gulp.dest(pkg.config.deployPath))
            .pipe(rename(pkg.name + "-" + pkg.version + ".js"))
            .pipe(minifycss())
            .pipe(gulp.dest(pkg.config.deployPath))
            .pipe(notify({message: 'mincss task complete'}));
});

// 圖檔
gulp.task('images', function () {
    return gulp.src(pkg.config.srcImgPath + '/**/*')
            .pipe(cache(imagemin({optimizationLevel: 3, progressive: true, interlaced: true})))
            .pipe(gulp.dest(pkg.config.deployPath + '/images'))
//            .pipe(notify({message: 'Images task complete'}));
});

//監視
gulp.task('watch', function () {
    gulp.watch(pkg.config.srcJsPath + '/**/*.js', ['minjs']);
    gulp.watch(pkg.config.srcSassPath + '/**/*.scss', ['mincss']);
//    gulp.watch(pkg.config.srcImgPath + '/**/*', ['images']);
    gulp.watch(pkg.config.srcTplPath + '/**/*.tpl.html', ['minjs']);
});



//sass
gulp.task('template', function () {
    return sass(pkg.config.srcSassPath + '/app.scss', {style: 'expanded'})
            .pipe(gulp.dest('Public/css'))
            .pipe(notify({message: 'sass task complete'}));
});

//clean
gulp.task('cleanjs', function () {
    del([pkg.config.deployPath + "/*.js", "!" + pkg.config.deployPath + "/*-" + pkg.version + ".js"])
});
gulp.task('cleancss', function () {
    del([pkg.config.deployPath + "/*.css", "!" + pkg.config.deployPath + "/*-" + pkg.version + ".css"])
});
gulp.task('cleantpl', function () {
    del([pkg.config.srcJsPath + "/" + pkg.version + "-tpls.js"])
});

gulp.task('clean', function () {
    return gulp.src([pkg.config.deployPath + '/*'], {read: false})
            .pipe(clean());
});

gulp.task('default', ['minjs', 'mincss'], function () {
    notify({message: 'all task complate'});
});

gulp/grunt 安裝/案例實戰實戰 JavaScript建構（編繹）系統大比拼：Grunt vs. Gulp

繼續閱讀

前端和背景是如何互動的？

怎樣使用SpringMVC控制頁面

Spring MVC 接收多個實體參數

CSS中僞類和僞元素的差別

Vue項目 - 單檔案元件和Vue中的路由

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題