首页 > 代码库 > gulp整理
gulp整理
gulp基于node
1、全局安装gulp:
$ npm install --global gulp
2、前往项目目录,然后安装作为项目的开发依赖(devDependencies):
$ npm install --save-dev gulp
3. 在项目根目录下创建一个名为 gulpfile.js 的文件:
1 var gulp = require(‘gulp‘); 2 3 gulp.task(‘default‘, function() { 4 // 将你的默认的任务代码放在这 5 console.log("hello gulp"); 6 });
4、运行gulp:
$ gulp
默认运行名为 default 的任务(task),在这里,这个任务打印"hello gulp"。
想要单独执行特定的任务(task)输入:gulp 任务名。
生成项目所需信息文件package.json:
输入命令npm init,一路按enter完成后自动生成package.json文件。
示例代码:
1 var gulp = require(‘gulp‘), 2 uglify = require(‘gulp-uglify‘), 3 concat = require(‘gulp-concat‘), 4 rename = require(‘gulp-rename‘), 5 cssnano = require(‘gulp-cssnano‘), 6 image = require("gulp-image"), 7 del = require(‘del‘), 8 less = require(‘gulp-less‘); 9 10 //压缩css,压缩后的文件放入dest/css 11 gulp.task(‘minifycss‘, function() { 12 return gulp.src(‘css/*.css‘) 13 .pipe(cssnano()) //压缩 14 .pipe(gulp.dest(‘dest/css‘));//输出 15 }); 16 //合并并压缩css,合并压缩后的文件放入dest/css 17 gulp.task(‘concatminifycss‘, function() { 18 return gulp.src(‘css/*.css‘) 19 .pipe(concat(‘main.css‘)) //合并所有css到main.css 20 //.pipe(gulp.dest(‘dest/css‘)) //输出main.css到文件夹 21 //.pipe(rename({suffix: ‘.min‘})) //rename压缩后的文件名 22 .pipe(cssnano())//压缩 23 .pipe(gulp.dest(‘dest/css‘));//输出 24 }); 25 26 //压缩js,压缩后的文件放入dest/js 27 gulp.task(‘minifyjs‘, function() { 28 return gulp.src(‘js/*.js‘) 29 .pipe(uglify())//压缩 30 .pipe(gulp.dest(‘dest/js‘));//输出 31 }); 32 33 //合并并压缩js,合并压缩后的文件放入dest/js 34 gulp.task(‘concatminifyjs‘, function() { 35 return gulp.src(‘js/*.js‘) 36 .pipe(concat(‘main.js‘)) //合并所有js到main.js 37 .pipe(gulp.dest(‘dest/js‘)) //输出main.js到文件夹 38 .pipe(rename({suffix: ‘.min‘})) //rename压缩后的文件名 39 .pipe(uglify())//压缩 40 .pipe(gulp.dest(‘dest/js‘));//输出 41 }); 42 43 //压缩图片,压缩后的文件放入dest/images 44 gulp.task(‘image‘,function(){ 45 gulp.src(‘images/*.+(jpg|png|gif|svg)‘) 46 .pipe(image())//压缩 47 .pipe(gulp.dest(‘dest/images‘));//输出 48 }); 49 50 //执行压缩前,先删除dest文件夹里的内容 51 gulp.task(‘clean‘, function(cb) { 52 del([‘dest/*‘], cb) 53 }); 54 55 //编译less到css 56 gulp.task("less",function(){ 57 gulp.src(‘css/*.less‘) 58 .pipe(less()) 59 .pipe(gulp.dest("dest/css")); 60 61 }); 62 //监视文件的变化 63 gulp.task("watch",function(){ 64 gulp.watch("css/*.less",[‘less‘]); 65 66 }); 67 68 //默认命令,在cmd中输入gulp后,执行的就是这个命令 69 gulp.task(‘default‘, function() { 70 // 将你的默认的任务代码放在这 71 gulp.start(‘clean‘,‘concatminifycss‘,‘image‘,‘concatminifyjs‘); 72 });
淘宝NPM镜像:
npm install -g cnpm --registry=https://registry.npm.taobao.org
注:mac系统要在前面加sudo
gulp整理
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。