标签:
Gulp干嘛的?如题。下面的内容里会有一些详细功能。
其实虽然闻名已久,我也是今天才开始研究。
所以边研究边做个笔记,希望同大家一起进步。
全局:npm install gulp -g
项目:npm install --save-dev gulp
创建gulpfile.js在你的项目根目录,通俗来说这就是gulp的配置文件,你想运用gulp的哪些功能,就在里面配置就行了(其实就是在这文件里面写代码)
cd到项目根目录,敲个命令 gulp 就OK了
安装gulp的删除模块
$ npm install --save-dev gulp del
这里删除分为两种情况:项目启动前和项目启动后,下面分别介绍。
用webstorm的都知道,它会在我们的项目里创建.idea文件夹,用vscode的话它会创建.setting文件夹。可实际发布环境中,这些都是不必要的,这时我们就可以通过gulp来删除了。下面展示如何在项目启动前删除:
var gulp = require(‘gulp‘); var del = require(‘del‘); //创建任务del gulp.task(‘del‘,function(cb){ del([ ‘./1.txt‘, //删除文件 ‘./123/*‘, //删除123文件夹下的匹配项 ‘!./123/3.txt‘ //不要删除的文件 ],cb); }); //敲打gulp命令时,它会先寻找default这个默认任务,然后根据第二个参数去查找任务执行。当然也可以直接gulp+任务名来执行任务 gulp.task(‘default‘,[‘del‘]);
npm install --save-dev gulp del vinyl-paths
var gulp = require(‘gulp‘); var del = require(‘del‘); var vinylPaths = require(‘vinyl-paths‘); gulp.task(‘clean‘, function () { //用vinylPath来记录下要删除的文件的地址 var vp=vinylPaths(); gulp.src(‘1.js‘) .pipe(vp) .pipe(gulp.dest(‘dist‘)) .on(‘end‘,function(){ //删除文件 del(vp.paths); }); }); gulp.task(‘default‘, [‘clean‘]);
npm install --save-dev gulp-minify-css gulp-concat gulp-uglify
var gulp = require(‘gulp‘), minifycss = require(‘gulp-minify-css‘), concat = require(‘gulp-concat‘), uglify = require(‘gulp-uglify‘); //压缩合并css gulp.task(‘minifycss‘, function() { gulp.src(‘./css/*.css‘) //压缩的文件 .pipe(minifycss()) //执行压缩 .pipe(concat(‘main.css‘)) //合并到main.css中 .pipe(gulp.dest(‘minified‘)); //输出文件夹 }); //压缩合并js gulp.task(‘minifyjs‘, function() { return gulp.src(‘./javascript/*.js‘) //也可以是数组,例如[‘foo/*‘, ‘bar/*‘] .pipe(uglify()) //压缩 .pipe(concat(‘main.js‘)) //合并所有js到main.js .pipe(gulp.dest(‘minified‘)); //输出main.js到文件夹 });
先写到这,下来会继续写
标签:
原文地址:http://www.cnblogs.com/showtime813/p/4500766.html