gulp+require+angular項目的打包

1、gulp.src(globs[,options])

options

一、base

gulp.src('client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 而且將 `base` 解析爲 `client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 寫入 'build/somedir/somefile.js'

gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));

2、gulp.dest(path[,options])

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified_templates'));

輸出文件所在的地址

3、gulp.task(name[,deps],fn)

name:任務的名字。若是你想要在命令中運行你的某些任務，那麼，請不要在名字使用空格

 

deps  ：type 【array】

一個包含任務列表的數組，這些任務會在你當前任務運行以前完成。

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
  // 作一些事
});

注意：你的任務是否在這些前置依賴的任務以前運行了？ 使用一個callback，或者返回一個promise或stream

fn：該函數定義任務所要執行的一些操做。一般來講，他會是這種形式：

接受一個callback

返回一個stream

gulp.task('somename',function(){
     var stream=gulp.src('client/**/*.js')
     .pipe(minify())
     .pipe(gulp.dest('build'));
        return stream

})

返回一個promise

var  Q=require('q');
gulp.task('somename',function(){
      var deferred=Q.defer();
      setTimeout(function(){
            deferred.resolve();
           
      })
      return deferred.promise
})

 4、gulp.watch(glob[,opts],task)或者gulp.watch(glob[,opts,cb])

glob：type【String、Array】

一個glob字符串，或者一個包含多個glob字符串的數組，用來指定具體監控那些文件的變更。

opts：type【Object】

tasks type【Array】

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

 

經常使用的插件

1、gulp-htmlmin

var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
 
gulp.task('minify', function() {
  return gulp.src('src/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));
});　

2、gulp-imagemin

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
 
gulp.task('default', () =>
    gulp.src('src/images/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
);

3、gulp-clean-css

let gulp = require('gulp');
let cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', () => {
  return gulp.src('styles/*.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('dist'));
});
//兼容到IE8

{compatibility: 'ie8'}

 callback 對css進一步分析

let gulp = require('gulp');
let cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', () => {
  return gulp.src('styles/*.css')
    .pipe(cleanCSS({debug: true}, function(details) {
      console.log(details.name + ': ' + details.stats.originalSize);
      console.log(details.name + ': ' + details.stats.minifiedSize);
    }))
  .pipe(gulp.dest('dist'));
});

4、gulp-uglify  專業打包js

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var pump = require('pump');

gulp.task('compress', function (cb) {
  pump([
        gulp.src('lib/*.js'),
        uglify(),
        gulp.dest('dist')
    ],
    cb
  );
});

5、gulp-concat 上面幾個都是壓縮，這插件是管合併的...恭喜，「減小網絡請求」的成就達成

var concat = require('gulp-concat');
 
gulp.task('scripts', function() {
  return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

var concat = require('gulp-concat');
 
gulp.task('scripts', function() {
  return gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});

6、gulp-autoprefixer 給 CSS 增長前綴。解決某些CSS屬性不是標準屬性，有各類瀏覽器前綴的狀況，灰常有用

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');

gulp.task('default', () =>
    gulp.src('src/app.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(gulp.dest('dist'))
);

7、gulp-rename 重命名

var rename = require("gulp-rename");
 
// rename via string 
gulp.src("./src/main/text/hello.txt")
  .pipe(rename("main/text/ciao/goodbye.md"))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/goodbye.md 
 
// rename via function 
gulp.src("./src/**/hello.txt")
  .pipe(rename(function (path) {
    path.dirname += "/ciao";
    path.basename += "-goodbye";
    path.extname = ".md"
  }))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/hello-goodbye.md 
 
// rename via hash 
gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
  .pipe(rename({
    dirname: "main/text/ciao",
    basename: "aloha",
    prefix: "bonjour-",
    suffix: "-hola",
    extname: ".md"
  }))
  .pipe(gulp.dest("./dist")); // ./dist/main/text/ciao/bonjour-aloha-hola.md 

 

項目的打包

 

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    minifyhtml = require("gulp-minify-html"),
/*    jshint = require('gulp-jshint'),*/
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat');
var rev = require('gulp-rev');                                  //- 對文件名加MD5後綴
var revCollector = require('gulp-rev-collector');               //- 路徑替換
var ngAnnotate = require('gulp-ng-annotate');
var useref = require('gulp-useref');
var revReplace = require('gulp-rev-replace');
var clean = require('gulp-clean');
var amdOptimize = require('gulp-amd-optimizer');
var srcPath = {
    html: 'app1',
    css: 'app1/css',
    script: 'app1/js',
    image: 'app1/images'
};
var destPath = {
    html: 'app',
    css: 'app/css',
    script: 'app/js',
    image: 'app/images'
};
gulp.task("clean", function () {
    return gulp.src(['app','dist','json'])
        .pipe(clean());
})
// Styles任務
gulp.task('styles', function () {
    //編譯sass
    return gulp.src(srcPath.css + '/*.css')
    //保存未壓縮文件到咱們指定的目錄下面
    // .pipe(gulp.dest(theDst))
    //給文件添加.min後綴
       // .pipe(rev())
        //  .pipe(rename({ suffix: '.min' }))
        //壓縮樣式文件
        .pipe(minifycss())
        //輸出壓縮文件到指定目錄
        .pipe(gulp.dest(destPath.css))
      //  .pipe(rev.manifest({merge: true}))                                   //- 生成一個rev-manifest.json
        .pipe(gulp.dest('./json'));                              //- 將 rev-manifest.json 保存到 rev 目錄內
});

gulp.task('minify', function () {
    var manifest = gulp.src("json/*.json");
    return gulp.src([srcPath.script + '/**/*.js']) //注意，此處特地如此，避免順序致使的問題
        .pipe(ngAnnotate())
       // .pipe(rev())
        .pipe(uglify())
        .pipe(gulp.dest(destPath.script))
        //.pipe(rev.manifest({path: 'js-manifest.json', merge: true}))
        .pipe(gulp.dest('json'))
});
/*gulp.task('app', function() {
 gulp.src(['dist/json/!*.json','app.js'])
 .pipe(revCollector())
 .pipe(useref({
 transformPath: function(filePath) {
 return filePath.replace('js/','dist/')
 }
 }))
 .pipe(gulp.dest('app/'))
 });*/
gulp.task('app',['minify'], function () {
    var manifest = gulp.src("json/*.json");
    gulp.src(destPath.script + '/**/*.js')
        .pipe(revReplace({manifest: manifest}))
        .pipe(gulp.dest(destPath.script))
});
gulp.task('main',['minify'], function () {
    var manifest = gulp.src("json/*.json");
    gulp.src(destPath.script + '/main*.js')
        .pipe(revReplace({manifest: manifest}))
        .pipe(gulp.dest(destPath.script))
});

gulp.task('html',['minify','styles'], function () {
    var manifest = gulp.src("json/*.json");
    gulp.src(srcPath.html + '/*.html')
        .pipe(revReplace({manifest: manifest}))
        .pipe(gulp.dest(destPath.html))
});
// Default task
gulp.task('default', function () {
    gulp.start('styles', 'minify', 'html', 'app','main' ,'watch');
});
// Watch
gulp.task('watch', function () {
    // Watch .js files
    gulp.watch(srcPath.css + '/*.css', ['styles']);
    gulp.watch([srcPath.script + '/**/*.js', srcPath.script + '/*.js'], ['minify']);
    //gulp.watch(destPath.script + '/**/*.js', ['app']);
    gulp.watch(srcPath.html + '/*.html', ['html']);
});

{
  "name": "tejyh",
  "version": "1.0.0",
  "main": "gulpfile.js",
  "dependencies": {
    "gulp-cli": "^1.3.0"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-amd-optimizer": "^0.6.0",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^3.2.0",
    "gulp-jshint": "^2.0.4",
    "gulp-less": "^3.3.0",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-minify-html": "^1.0.6",
    "gulp-ng-annotate": "^2.0.0",
    "gulp-rev": "^7.1.2",
    "gulp-rev-collector": "^1.1.1",
    "gulp-rev-replace": "^0.4.3",
    "gulp-uglify": "^1.5.3",
    "gulp-useref": "^3.1.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}