1、安装nodejs
2、安装gulp
使用webstorm打开一个空项目,在webstorm的Terminal窗口依次执行如下命令:
npm i gulp -g //全局安装gulp;
npm init //新建package.json文件,一路回车默认就好了;
npm install gulp --save-dev //在项目中安装gulp;
3、安装gulp插件
在webstorm的Terminal窗口依次执行如下命令:
npm install gulp-jshint --save-dev //语法检查
npm install gulp-concat --save-dev //合并文件
npm install gulp-uglify --save-dev //压缩代码
npm install gulp-rename --save-dev //文件重命名
npm install gulp-less --save-dev //把less文件编译成css文件
npm install gulp-clean-css --save-dev //压缩css
npm install browser-sync --save-dev //保存文件浏览器自动刷新
4、编写gulpfile.js文件
新建gulpfile.js文件,代码如下,新建less、css、js、dist文件夹,less下新建index.less,js下新建index.js,dist下新建css、js文件夹,
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
less = require('gulp-less'), //less编译
cssmin = require('gulp-clean-css'), //css压缩
jsmin = require('gulp-uglify'), //js压缩
concat = require('gulp-concat'), //合并文件
rename = require("gulp-rename"); //文件重命名
/* 定义一个Less编译任务 */
gulp.task('Less', function () {
gulp.src('less/index.less') //该任务针对的文件
.pipe(less()) //该任务调用的模块
.pipe(gulp.dest('css')); //将会在css下生成index.css
});
/* css压缩任务 */
gulp.task('minCss', function () {
gulp.src('css/index.css')
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/css'));
});
/* js压缩合并任务 */
gulp.task('minJs', function () {
gulp.src('js/*.js')
.pipe(jsmin())
.pipe(concat('all.js')) //合并后的文件名
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/js'));
});
/* 监听css文件,当css/下所有css文件发生改变时,调用minCss任务 */
gulp.task('WatchCss', function () {
gulp.watch('css/*.css', ['minCss']);
});
/* 监听less文件,当less下所有的less文件发生改变时,调用Less任务 */
gulp.task('WatchLess', function () {
gulp.watch('less/*.less', ['Less']); //当所有less文件发生改变时,调用testLess任务
});
/* 监听js文件,当js下所有的js文件发生改变时,调用minJs任务 */
gulp.task('WatchJs', function () {
gulp.watch('js/*.js', ['minJs']); //当所有less文件发生改变时,调用testLess任务
});
gulp.task('default',['Less','WatchLess','minCss','WatchCss','minJs','WatchJs']); //定义默认任务 只需要开启默认任务就可以
5、使用webstorm运行gulp任务
在gulpfile.js上右击鼠标,选择Show Gulp Tasks ,在打开的gulp任务列表中双击default 即可开启任务。点击default之外的则分别执行任务。
如果没有自动压缩css,点击此处重新default即可,