webstorm下gulp3.9.1的使用

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即可，