首先,npm install --save-dev等命令就不用说了。
先安装了以下东东:
安装插件:
npm install --save-dev gulp //打包工具
//css相关
npm install --save-dev gulp-less //编译less文件 https://www.npmjs.com/package/gulp-autoprefixer
npm install --save-dev gulp-clean-css //压缩css代码 https://github.com/scniro/gulp-clean-css
npm install --save-dev gulp-autoprefixer //自动补全各浏览器的css前辍autoprefixer https://github.com/postcss/autoprefixer
//js
npm install babel-core gulp-babel babel-preset-es2015 babel-preset-stage-3 --save-dev //babel相关
//babel-plugin-transform-runtime babel的实时插件
//maps生成
npm install --save-dev gulp-sourcemaps //生成sourcemaps文件
npm install --save-dev cross-env //scripts中在环境变量中加值
npm install --save-dev concat //合并多文件
npm install --save-dev uglify //合并js
package.json 生成的情况如下:
{
"name": "gulpTest",
"version": "1.0.0",
"description": "This is for study gulp project !",
"homepage": "",
"repository": {
"type": "git",
"url": "https://git.oschina.net/huhu/gulpTest"
},
"author": {
"name": "yfx",
"email": "3811970@qq.com"
},
"license": "ISC",
"scripts": {
"test": "cross-env NODE_ENV=production gulp"
},
"devDependencies": {
"babel-core": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-3": "^6.5.0",
"cross-env": "^1.0.7",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-babel": "^6.1.2",
"gulp-clean-css": "^2.0.7",
"gulp-concat": "^2.6.0",
"gulp-less": "^3.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.3"
}
}
gulpfile.js是gulp的执行配置脚本,可以通过 ./gulp运行这个脚本也可以scripts中加入命令(我加了个test)然后使用npm run test就可以了。
cross-env是加入环境变量的意思,直接引用到devDependencies中并在scripts中加入相应参数就可以使用process.env.XXXX得到配置的变量了(webpack的文档中老看到在用,用起来感觉不错)。
gulpfile.js内容:
var gulp=require('gulp');
//css
var less=require('gulp-less');
var cleanCSS = require('gulp-clean-css');//css 代码压缩
var autoprefixer = require('gulp-autoprefixer'); //css代码自动补全
//js
var babel = require('gulp-babel'); //css代码自动补全
var uglify = require('gulp-uglify');//js压缩
//tool
var sourcemaps = require('gulp-sourcemaps');//生成sourcemaps
var concat = require('gulp-concat'); //css代码自动补全
//定义一个testLess任务(自定义任务名称)
gulp.task('testLess', function () {
var gulpTest=gulp.src('src/css/*.less'); //该任务针对的文件 'src/css/xxx.less'|['src/css/xxx.less','src/css/xxx1.less']|'src/css/*.less' 都行
if(process.env.NODE_ENV!='production'){
gulpTest=gulpTest.pipe(sourcemaps.init());
}
gulpTest=gulpTest.pipe(less()) //该任务调用的模块
.pipe(autoprefixer({ browsers: [
'Android >= 4',
'Chrome >= 20',
'Firefox >= 24', // Firefox 24 is the latest ESR
'Explorer >= 9',
'iOS >= 6',
'Opera >= 12',
'Safari >= 6'
], cascade: true , remove:false})) //自动补全
.pipe(cleanCSS())//{compatibility: 'ie8'} ie8|ie7|*(默认) 其它值为ie9+ 压缩css
.pipe(concat('app.css'));
if(process.env.NODE_ENV!='production'){
gulpTest=gulpTest.pipe(sourcemaps.write());
}
gulpTest=gulpTest.pipe(gulp.dest('dest/css')); //将会在src/css下生成index.css
});
gulp.task('testEs6', function () {
var gulpTest= gulp.src('src/js/*.es6');
if(process.env.NODE_ENV!='production'){
gulpTest=gulpTest.pipe(sourcemaps.init());
}
gulpTest=gulpTest.pipe(babel({presets: ['es2015','stage-3']}))
.pipe(uglify())
.pipe(concat('app.js'));
if(process.env.NODE_ENV!='production'){
gulpTest=gulpTest.pipe(sourcemaps.write());
}
gulpTest=gulpTest.pipe(gulp.dest('dest/js'));
});
//默认的任务
gulp.task('default',['testLess','testEs6']); //定义默认任务
testLess是打包less的,能完成less的转换,兼容性(包括版本及各浏览器)自动补全,(css样式排序csscomb ,css代码检查csslint 没弄进去)想研究的可以在https://www.npmjs.com中查询到相应插件自行怎(gulp的当然要加gulp-,如gulp-csscomb),压缩,文件合并,maps生成。
testEs6 是包打js的,能完成es6转es5,压缩,合并,maps生成。
加了环境变量读取。
实时查看的插件没有引入。babel,less,gulp的3个实时插件加上去就行。
遇到的坑:
不要使用nodejs6,nodejs6是支持es6,但gulp工具打包会有问题。我用的是4.4.4,github的官方回复说法是nodejs7才会修复此问题。
转载请说明来源,谢谢。