gulp的使用

参考Gulp中文官网https://www.gulpjs.com.cn/

 

1、首先下载npm 或 cnpm

 

2、全局安装gulp

npm install --global gulp

 

3、作为项目的开发依赖安装

npm install --save-dev gulp （此时会生产配置文件pakeage.json）

 

4、创建gulpfile.js文件

var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 });

5、执行语句

gulp build （build为你自己创建的任务）

 

 

gulp 插件的下载

命令行

cnpm install gulp gulp-clean-css gulp-uglify gulp-concat gulp-rename gulp-jshint jshint gulp-less gulp-sass --save-dev 等

下载自己要用的插件

 

 

下面是案例

var gulp = require('gulp'),
    less = require('gulp-less'),
    sass = require('gulp-sass');
    minifycss = require('gulp-clean-css'),//css文件压缩
    concat = require('gulp-concat'),//js合并
    uglify = require('gulp-uglify'),//js压缩
    rename = require('gulp-rename'),//重命名  给js压缩文件添加.min前缀
    jshint=require('gulp-jshint');//js语法检查
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('less/*.less')       //该任务针对的文件
        .pipe(less())             //该任务调用的模块
        .pipe(gulp.dest('css'));  //将会在css下生成index.css
});
//定义一个testScss任务（自定义任务名称）
gulp.task('testSass', function () {
    gulp.src('sass/*.scss')      //该任务针对的文件
        .pipe(sass())         //该任务调用的模块
        .pipe(gulp.dest('css'));  //将会在css下生成index.css
});

//语法检查
gulp.task('jshint', function () {
    return gulp.src('js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
//压缩css
gulp.task('minifycss', function() {
    return gulp.src('css/*.css')    //需要操作的文件
        .pipe(rename({suffix: '.min'}))   //rename压缩后的文件名
        .pipe(minifycss()) //执行压缩css
        .pipe(gulp.dest('allcss')); //输出文件夹
});
//压缩,合并js
gulp.task('minifyjs', function() {
    return gulp.src('js/*.js')          //需要操作的文件
        .pipe(concat('all.js'))         //合并所有js到all.js
        .pipe(gulp.dest('alljs'))       //输出到文件夹alljs下
        .pipe(rename({suffix: '.min'})) //rename压缩后的文件名
        .pipe(uglify())    //压缩
        .pipe(gulp.dest('alljs'));  //输出
});
/*//默认命令,在cmd中输入gulp后,执行的就是这个任务(压缩js需要在检查js之后操作)
 gulp.task('default',['jshint'],function() {
 gulp.start('minifycss','minifyjs');
 });*/

gulp.task('gulpWatch',function(){
    gulp.watch('js/*.js',['minifyjs']);
    gulp.watch('less/*.less',['testLess','minifycss']);
});
//同时让默认程序执行一次，可以提高开始执行速度。
gulp.task('default',['jshint','testLess','testSass','minifycss','minifyjs','gulpWatch']);

 

这是一份angular.js项目简单的gulp操作

var gulp = require('gulp');
var clean = require('gulp-clean'); //清理文件或文件夹
var minify = require('gulp-uglify'); //- 压缩js；
// var babel = require("gulp-babel"); // es6=>es5
//var concat = require('gulp-concat');                            //- 多个文件合并为一个；
var minifyCss = require('gulp-clean-css'); //- 压缩CSS为一行；
var rev = require('gulp-rev'); //- 对文件名加MD5后缀
var revAppend = require('gulp-rev-append'); //- 给URL自动添加MD5版本号
var revCollector = require('gulp-rev-collector'); //- 路径替换
var replace = require('gulp-replace'); //替换地址
var runSequence = require('gulp-run-sequence');
var revFormat = require('gulp-rev-format');
var revReplace = require('gulp-rev-replace');
var ngAnnotate = require('gulp-ng-annotate');
var ngmin = require('gulp-ngmin');
var stripDebug = require('gulp-strip-debug');

/*=====================清理构建目录==========================*/
gulp.task('clean', function() {
	return gulp.src('dist/', {
			read: false
		})
		.pipe(clean());
});

/*=====================copy其他静态资源文件==========================*/
gulp.task('copyfont', function() {
	return gulp.src(['qinyuan/font/*'])
		.pipe(gulp.dest('dist/font'))
});
gulp.task('copyimages', function() {
	return gulp.src(['qinyuan/images/*'])
		.pipe(gulp.dest('dist/images'))
});
gulp.task('copylay', function() {
	return gulp.src(['qinyuan/lay/**/*'])
		.pipe(gulp.dest('dist/lay'))
});
gulp.task('copypage', function() {
	return gulp.src(['qinyuan/pages/**/*'])
		.pipe(gulp.dest('dist/pages'))
});
gulp.task('copyhtml', function() {
	return gulp.src(['qinyuan/*.html'])
		.pipe(gulp.dest('dist'))
});
gulp.task('copycssimg', function() {
	return gulp.src(['qinyuan/css/img/*'])
		.pipe(gulp.dest('dist/css/img'))
});

/*=====================压缩js==========================*/
gulp.task('jsbusiness', function() {
	return gulp.src(['qinyuan/js/business/*.js']) // 匹配
	    .pipe(ngAnnotate())
        .pipe(ngmin({dynamic: false}))//Pre-minify AngularJS apps with ngmin
		.pipe(minify())
		.pipe(rev())
		.pipe(gulp.dest('dist/js/business'))
		.pipe(rev.manifest())
		.pipe(gulp.dest("config/business"));
});
gulp.task('jscontrollers', function() {
	return gulp.src(['qinyuan/js/controllers/*.js']) // 匹配
		.pipe(ngAnnotate())
        .pipe(ngmin({dynamic: false}))//Pre-minify AngularJS apps with ngmin
		.pipe(minify())
		.pipe(rev())
		.pipe(gulp.dest('dist/js/controllers'))
		.pipe(rev.manifest())
		.pipe(gulp.dest("config/controllers"));
});
gulp.task('jsmove', function() {
	return gulp.src('qinyuan/js/dependency/**/*') // 匹配
		.pipe(gulp.dest('dist/js/dependency'))
});

/*=====================压缩css==========================*/
gulp.task('concat', function() {
	return gulp.src(['qinyuan/css/**/*.css']) // 匹配
		.pipe(minifyCss())
		.pipe(gulp.dest('dist/css'))
});

/*=====================路径替换==========================*/
gulp.task('update-versionjs', function() {
	return gulp.src(['config/**/*.json', 'qinyuan/*.html'])
		.pipe(revCollector({
			replaceReved: true,
		}))
		.pipe(gulp.dest('dist/'));
});

gulp.task('build', function(done) {
	runSequence(
		['clean'],
		['copyfont', 'copyimages', 'copylay', 'copypage', 'copyhtml', 'copycssimg'],
		['jsbusiness', 'jscontrollers', 'jsmove'],
		['concat'],
		['update-versionjs'],
		done);
})

 如有疑问，请留言。。。可能有空