gulp+require+angular项目的打包

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

options

1、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'));

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

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

输出文件所在的地址

三、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
})

 四、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...');
});

 

常用的插件

一、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'));
});　

二、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'))
);

三、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'));
});

四、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
  );
});

五、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/'));
});

六、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'))
);

七、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": ""
}