1.安装nodejs
安装省略
npm的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。
2.cmd(npm)- 全局安装gulp
npm install -g gulp
3.cmd(npm)- 进入项目路径,执行npm init ,生成package.json文件
npm init -y
4.cmd(npm)- 在项目目录下开始本地安装gulp各种插件
npm install gulp-jshint --save-dev
gulp-concat、gulp-uglify、gulp-rename ..等.(--save-dev 是可以省掉你手动修改package.json文件的步骤,正常情况下得连同版本号手动将他们添加到模块配置文件)package.json中的依赖里
5.在项目目录下新建gulpfile.js文件,gulp有五种方法:task
,run
,watch
,src
,和dest.
gulpfile.js
//引入组件
var gulp = require('gulp'); var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var clean = require('gulp-clean');
var minify_css = require('gulp-minify-css'); //创建任务
gulp.task('hint',function(){
return gulp.src(['a.js', 'b.js', 'c.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); gulp.task('script', function () {
return gulp.src(['a.js', 'b.js', 'c.js'])
.pipe(concat('ABC.js'))
.pipe(gulp.dest('application'))
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('application'));
}); gulp.task('css1', function () {
return gulp.src('dist/css/d.css')
.pipe(minify_css())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('application'));
}); gulp.task('css2', function () {
return gulp.src(['dist/css/e.css', 'dist/css/f.css'])
.pipe(concat('EF.css'))
.pipe(gulp.dest('application'))
.pipe(minify_css())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('application'));
}); gulp.task('watch', function () {
gulp.watch(['a.js', 'b.js', 'c.js'], ['script']);
gulp.watch('dist/css/d.css', ['css1']);
gulp.watch(['dist/css/e.css', 'dist/css/f.css'], ['css2']);
}); gulp.task('clean', function () {
return gulp.src('application', {read: false})
.pipe(clean());
}); gulp.task('default', ['clean'], function () {
gulp.run('hint','script', 'css1', 'css2', 'watch');
});
6.cmd(npm)- 执行任务
gulp default