初始化项目
npm init(一路默认)
安装所需的依赖
gulp
npm install --save-dev gulp
根目录下新建gulpfile.js
browserSync
相当于热加载的一个工具,可多设备同步
npm install browser-sync --save-dev
地址:https://browsersync.io/docs/gulp
gulp-inject
自动注入css/js的一个工具
npm install gulp-inject --save-dev
//注入css js
gulp.task('dev-inject', function () {
var target = gulp.src(path.input.index);
var assets = gulp.src([
path.output.css+'/bundle.css',
path.output.js+'/bundle.js'
], {
read: false
});
return target
.pipe(inject(assets, {
ignorePath: 'app/dist/',
addRootSlash: false,
removeTags: true
}))
.pipe(gulp.dest(path.output.dist));
});
gulp-autoprefixer
自动补全css前缀
npm install gulp-autoprefixer --save-dev
gulp-concat
文件合并
npm install gulp-concat --save-dev
gulp-imagemin
图片压缩
npm install gulp-imagemin --save-dev
gulp.task('dev-images', function () {
return gulp.src(path.input.image)
.pipe(imagemin())
.pipe(gulp.dest(path.output.image))
})
gulp-minify-css
压缩css
npm install gulp-minify-css --save-dev
gulp-less
编译less
npm install gulp-less --save-dev
gulp.task('dev-less', function () {
var cssPlugins = plugins.stylesheets;
return streamSeries(
gulp.src(cssPlugins),
gulp.src(path.input.css)
.pipe(less())
.pipe(autoprefixer()))
.pipe(concat('bundle.css'))
.pipe(gulp.dest(path.output.css))
.pipe(browserSync.stream())
})
gulp-rename
重命名
npm install gulp-renames --save-dev
gulp-uglify
压缩js
npm install gulp-uglify --save-dev
gulp.task('dev-js', function () {
var jsPlugins = plugins.javascripts
return streamSeries(
gulp.src(jsPlugins),
gulp.src(path.input.js)
)
.pipe(concat('bundle.js'))
.pipe(gulp.dest(path.output.js))
})
run-sequence
任务工作流
npm install run-sequence --save-dev
stream-series
支持多个gulp.src
npm install stream-seriese --save-dev
del
删除文件
npm install del --save-dev
其他插件
"animate.css": "^3.4.0",//动画
"jquery": "^3.1.1",
"normalize.css": "^5.0.0",//规则化css
"swiper": "^3.2.7" //滑动切换库
github地址:https://github.com/BrotherWY/gulp-h5
