首先,肯定是需要下载安装node.js的。安装完成之后我们可以在操作命令行来查看版本号。
node -v
nmp -v
然后我们可以创建项目 , 在这儿要提到一点 gulp安装 一个是全局的一个是依赖项目的。 对应的命令行是
npm gulp -g
依赖项目的需要先进入到项目路径 然后
npm gulp --save-dev
npm init //我们对项目信息进行填充 包括项目名称 版本号 描述等等。
var gulp = require('gulp'),
minifycss =require('gulp-minify-css'), //CSS压缩
concat =require('gulp-concat'), // 文件合并
uglify =require('gulp-uglify'), //js压缩插件
rename =require('gulp-rename'), // 重命名
order = require('gulp-order'); //顺序
这是经常用到的几个插件。 作用都在后面注释里。 他们可以执行代码的合并压缩重命名。提高项目运行效率。
这是基本的,当然需要我们创建一个gulpfile.js的文件 来执行。 下面我贴上里面的代码
var gulp = require('gulp'),
minifycss =require('gulp-minify-css'), //CSS压缩
concat =require('gulp-concat'), // 文件合并
uglify =require('gulp-uglify'), //js压缩插件
rename =require('gulp-rename'), // 重命名
order = require('gulp-order');
//1.压缩css
gulp.task('minifycss', function() {
returngulp.src('css*.js')
// .pipe(order(
// ['js/ui-route.js','js/config/config.js','js/colltor/list1.js']
// ))
// .pipe(concat('all.js')) //合并所有js到all.js
// .pipe(gulp.dest('dist/js')) //输出all.js到文件夹
// .pipe(rename({suffix: '.min'})) //rename压缩后的文件名
// .pipe(uglify()) //压缩
// .pipe(gulp.dest('dist/js')); //输出
//});
//3.将以上两个任务合并为一个任务
gulp.task('build', ['minifycss', 'minifyjs']);
//4.监视文件的变化,自动执行任务
// 监视文件的变化,当文件有更新时执行build任务
gulp.task('watch', function () {
gulp.watch(['src/js/*.js', 'src/css/*.css'], ['build']);
});
//5.定义默认任务
gulp.task('default', ['build', 'watch']);
代码后面都有注释 。 这就是从 代码的合并 =》 压缩 =》重命名 =》输出的过程。